组件的渲染过程
调取组件的时候，babel解析，传递给createElement的第一个参数type不再是字符串标签名，而是函数或者类，生成的对象中，type也是一个函数，当render渲染的时候会根据type的类型不同而做不同的事情（如果是字符串就创建元素，如果是函数，就会把函数执行，把返回的jsx对象创建成为新的元素进行渲染），函数执行的时候会把解析出来的对象中的props作为属性传递给组件
函数式创建组件
- 函数返回一个jsx
- props储存的值是一个对象，包含了调用组件时候传递的属性值（不传是一个空对象）
ReactDOM.render(<div>
<ComponentA props1={12} className="class1">
<span>lalla</span>
</ComponentA >
</div>,root)
function ComponentA(props){
let {props1,className,children}=props
return <div className={className}>
<span>{props1}<span>
<p>{props2}<p>
{children}//就是<span>lalla</span>
</div>
}
只能通过操作组件的DOM修改组件，使用ref属性获取元素
没有自己的状态state
类式创建组件
基于继承component类来创建组件
class ComponentB extends React.Component{
constructor(props){
super(props)
//super必须写 否则报错，相当于React.Component.call(this),就是call继承，继承父级私有属性
//在继承私有的时候，把传递的属性挂载到了子类的实例上，在constructor中就可以使用this.props了
/**
*{
* this.props//属性集合
* this.refs//refs集合
* this.context//上下文
* }
*/
this.state={//相当于vue组件中的data
name:123
}
}
render(){
return <div>{this.state.name}{this.props.aa}</div>
}
}
区别
- 函数创建式：
- 操作简单
- 能实现的功能简单，只能简单的调取和返回jsx
- 没有state状态
- 类创建式
- 操作复杂，实现复杂的业务逻辑
- 能够使用声明周期函数
- 函数式可以理解为静态组件（很难修改的），类的方式可以基于组件内部的状态来动态渲染组件的内容
