码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-06-20 10:45:47      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:创建   cto   生命周期   函数   rop   属性   方式   业务   删除   

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>
    );
  }
}

 

 

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

标签:创建   cto   生命周期   函数   rop   属性   方式   业务   删除   

原文地址:https://www.cnblogs.com/wangyfax/p/13167558.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!