class创建组件和function创建组件的区别

Posted 2020-12-11 wangyfax

function创建的组件

注意：

    1、使用function构造函数创建的组件，内部没有state私有的数据，

          只有一个props来接收外界传递过来的数据

    2、使用function创建的组件叫做【无状态组件】

    3、应用场景：如果一个组件只需要根据外界传递过来的props，渲染固定的页面结构，

     此时非常适用【无状态组件】

    4、优点：由于删除了组件的生命周期，所以运行速度会相当于快一点

　　

import React from "react";
function Hello(props) {
  return (
    <div>
      <h1>创建组件方式二-参数-{JSON.stringify(props)}</h1>
      <p>将组建抽离成单独的问你件</p>
    </div>
  );
}

//导出组件

export default Hello;

 

class创建的组件

注意：

    1、使用class关键字创建的组件，内部出了有this.props这个只读

        属性之外，还有一个专门用于存放自己私有数据的this.state属性

        这个state是可读可写的

    2、使用class创建的组件叫做【有状态组件】；【有状态组件】有自己的生命周期函数

    3、应用场景：如果一个组件需要存放自己的私有数据，或者需要在组件的不同阶段执行

       不同的业务逻辑，此时非常适合【有状态组件】

　　

import React from "react";
export default class Hello2 extends React.Component {
  constructor(props1) {
    super(props1);
    console.log(props1);
    this.state = {
      msg: "这是Hello2组件的私有msg数据",
      info: "哈哈哈",
    };
  }
  render() {
    return (
      <div>
        创建组件的第二种方式：这是使用class创建的组件
        <h1>外界传过来的数据是：{JSON.stringify(this.props)}</h1>
      </div>
    );
  }
}