有狀態和無狀態組件

有狀態和無狀態組件

組件是自我維持的、獨立的微實體，其描述了UI的一部分，能夠將應用程序的UI拆分爲較小的組件，其中每一個組件都有本身的代碼、結構和API，簡單來講組件容許你將UI拆分爲獨立可複用的代碼片斷，並對每一個片斷進行獨立構思。

描述

React中的組件按狀態主要分爲無狀態組件和有狀態組件兩類，一般來講，使用class關鍵字建立的組件，有本身的私有數據this.state和生命週期函數就是有狀態組件，使用function建立的組件，只有props沒有本身的私有數據和生命週期函數就是無狀態組件。

無狀態組件

無狀態組件Stateless Component是最基礎的組件形式，因爲沒有狀態的影響因此就是純靜態展現的做用。通常來講，各類UI庫裏也是最開始會開發的組件類別，例如按鈕、標籤、輸入框等。其的基本組成結構就是屬性props以及事件函數調用。因爲不涉及到狀態的更新，因此這種組件的複用性也最強，無狀態組件因爲沒有本身的state和生命週期函數，因此運行效率高。

• 只負責接收props渲染DOM，不維護本身的state。
• 不能訪問生命週期方法。
• 不須要聲明類，能夠避免extends或constructor之類的代碼，語法上更加簡潔。
• 不會被實例化，所以不能直接傳ref，可使用React.forwardRef包裝後再傳ref。
• 不須要顯示聲明this關鍵字，在ES6的類聲明中每每須要將函數的this關鍵字綁定到當前做用域，而由於函數式聲明的特性，咱們不須要再強制綁定。
• 更好的性能表現，由於函數式組件中並不須要進行生命週期的管理與狀態管理，所以React並不須要進行某些特定的檢查或者內存分配，從而保證了更好地性能表現。

簡單來講若是一個組件不須要管理state而只是純粹的展現，那麼就能夠定義成無狀態組件。

function Hello(props) { 
    return (
        <div>Hello {props.name}</div>
    )
}

對於這種無狀態的組件，使用函數式的方式聲明，會使得代碼的可讀性更好，並能大大減小代碼量，使用箭頭函數可以使代碼更加簡潔。

const Todo = (props) => ( 
    <div onClick={props.onClick}>{props.text}</div> 
)

有狀態組件

有狀態組件Stateful Component是在無狀態組件的基礎上，若是組件內部包含狀態state且狀態隨着事件或者外部的消息而發生改變的時候，這就構成了有狀態組件。有狀態組件一般會帶有生命週期lifecycle，用以在不一樣的時刻觸發狀態的更新。這種組件也是一般在寫業務邏輯中最常常使用到的，根據不一樣的業務場景組件的狀態數量以及生命週期機制也不盡相同。

class Hello extends React.Component{
  constructor(props){
    super(props);
    this.state = { 
      tips: "Hello World!"
    }
  }
  componentDidMount() {
    console.log("ComponentDidMount", this);
  }
  componentWillUnmount() {
    console.log("ComponentWillUnmount", this);
  }
  render() {
    return (
      <div>{this.state.tips}</div>
    );
  }
}

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.jianshu.com/p/63569386befc
https://juejin.cn/post/6844903597147160584
https://juejin.cn/post/6844903493816303624
https://blog.csdn.net/cunjie3951/article/details/106919202
https://blog.csdn.net/weixin_30819085/article/details/99989723
https://setcina.github.io/2019/03/07/react%E6%9C%89%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6%E5%92%8C%E6%97%A0%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6%E7%9A%84%E5%8C%BA%E5%88%AB/