含义: 组件是包含内容（html），样式(css)和功能(js)的ui单元
分类
react 组件分为两种组件（由于本人会ts(typescript),所以后面的列子都是基于typescript来进行组件编写）
- 函数式组件
- 类组件
函数式组件
返回一个React元素
代码格式例如：
import React from 'react' export default function MyFuncComp() { return ( <div> 我是函数式组件,// 这里面需要可以写该组件对于的css, js 和 html等，但是建议使用jsx </div> ) }
使用方式：
在需要使用的地方，import 该组件，然后在对应的位置中使用即可，但是这里有两种使用方式：
- 直接函数使用：
- 通过组件的方式使用：
效果
类组件
必须继承React.Component
必须提供render函数，用于渲染组件
样例：
import React, { Component } from 'react' export default class MyClassComp extends Component { render() { return ( <div> 我是类组件 </div> ) } }
使用方式
和上面的函数式组件一样的，都是两种方式
注意事项：
- react 组件导出的函数式组件或者类组件命名必须大写(大驼峰命名),原因，我们在使用组件的时候，如果使用标签的方式来进行使用，如果不是大驼峰的方式命名的话，在使用用会报错：
- 使用组件的方式，尽量使用 标签的方式，原因： 使用标签的方式方便 react devtools 来进行调试，如：
函数调用方式：
组件传参
函数组件
对于函数组件，属性会作为一个对象的属性，传递给函数的第一个参数
样例：
// MyFuncComp.tsx 组件内容 import React from 'react' interface MyFuncCompProps{ // 测试数据 num: number } export default function MyFuncComp(props:MyFuncCompProps) { return ( <div> 我是函数式组件,传递的数字{props.num} </div> ) } // main.tsx 中调用 import React from 'react' import ReactDOM from 'react-dom' import MyFuncComp from './pro/comp/MyFuncComp' ReactDOM.render( <div> <MyFuncComp num={1} /> // 可以多次调用达到复用 <MyFuncComp num={2} /> // 进行传参 </div> , document.getElementById('root') )
效果：
类组件
对于类组件，属性会作为一个对象的属性，传递给构造函数的参数,(这一步操作，react 会默认自动完成)
样例
// MyClassComp.tsx 文件内容 import React, { Component } from 'react' interface MyFuncCompProps { // 测试数据 num: number } export default class MyClassComp extends Component<MyFuncCompProps> { // MyFuncCompProps 这个地方对组件属性进行限制 render() { return ( <div> 我是类组件,传过来的数字是：{this.props.num} </div> ) } } // main.tsx 中调用 import React from 'react' import ReactDOM from 'react-dom' import MyClassComp from './pro/comp/MyClassComp' ReactDOM.render( <div> <MyClassComp num={1} /> //多次调用 <MyClassComp num={2} /> // 传参方式是一样，参数的类型可以是任意的，只要接口约定好就行 </div> , document.getElementById('root') )
效果
注意：组件的属性,传递的参数应该使用``小驼峰命名法,参数理论上可以是任何值，包括react 创建的虚拟dom
组件无法改变自身的属性。
之前学习的React元素,div、li 基本上的html标签，本质上，就是一个组件（内置组件）
React中的哲学：数据属于谁，谁才有权力改动
React中的数据，自顶而下流动， 单向数据流
组件传递一个jsx 对象
通过上面我们知道了，组件可以传递任意的参数，但是如果我想在组件里面传递一个jsx对象呢？
两种方式：
第一种是直接通过属性的方式来进行传递，
例如：
import React, { Component } from 'react' interface MyFuncCompProps { // 测试数据 html: JSX.Element } export default class MyClassComp extends Component<MyFuncCompProps> { render() { return ( <div> 我是类组件,传过内容是： {this.props.html} </div> ) } } // main.tsx 中调用 import React from 'react' import ReactDOM from 'react-dom' import MyClassComp from './pro/compProp/MyClassComp' ReactDOM.render( <div> <MyClassComp html={<h1> 第一个标签</h1>} /> <MyClassComp html={<h2> 第二个标签</h2>} /> </div> , document.getElementById('root'))
效果：
第二种是直接通过子标签的形式
结果：
> 如果是单个子节点可以使用自带的children语法糖，如果是多个，还是需要使用属性的方式来进行传参。
