react创建组件的两种方式

组件的渲染过程

调取组件的时候，babel解析，传递给createElement的第一个参数type不再是字符串标签名，而是函数或者类，生成的对象中，type也是一个函数，当render渲染的时候会根据type的类型不同而做不同的事情（如果是字符串就创建元素，如果是函数，就会把函数执行，把返回的jsx对象创建成为新的元素进行渲染），函数执行的时候会把解析出来的对象中的props作为属性传递给组件

函数式创建组件

1. 函数返回一个jsx
2. 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>
  }
}

区别

• 函数创建式：
  1. 操作简单
  2. 能实现的功能简单，只能简单的调取和返回jsx
  3. 没有state状态
• 类创建式
  1. 操作复杂，实现复杂的业务逻辑
  2. 能够使用声明周期函数
  3. 函数式可以理解为静态组件（很难修改的），类的方式可以基于组件内部的状态来动态渲染组件的内容