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