zoukankan      html  css  js  c++  java
  • class创建组件和function创建组件的区别

    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>
        );
      }
    }
     
  • 相关阅读:
    七:webpack.config.js文件的高级配置
    六:webpack-dev-server 设置反向代理解决跨域问题
    四:Webpack执行命令参数详解
    二:Webpack的基本配置
    一:WebPack的安装
    三:Webpack模块的导出以及之间的依赖引用
    Vue-vue-router.js路由--API
    Vue-vue-router.js路由--进级
    RSA非对称加密,公钥加密/私钥解密
    SHA256withRSA证书签名,私钥签名/公钥验签
  • 原文地址:https://www.cnblogs.com/wangyfax/p/13167558.html
Copyright © 2011-2022 走看看