React class & function component 的區別

學習react之理解 React class & function component區別

本文參考自

https://www.cnblogs.com/chrissong/p/10445191.html

function component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class 語法的component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

function和class component 的區別
1.syntax 語法：functional component語法更簡單，只需要傳入一個props參數，返回一個react片段。class component 要求先繼承React.Component然後常見一個render方法，在render裏面返回react片段。兩者編譯之後的代碼不同
2.state 狀態：因爲function component 知識一個普通的函數所以不可以在其中用this.state , setState(),這也是它被叫做無狀態組件的原因。所以一個組件需要用到狀態的時候要用到class component。
3.lifecycle hooks 生命週期：function component 不具有生命週期，因爲所有的生命週期鉤子函數均來自於React.Component。所以當一個組件需要生命週期鉤子的時候我們也需要class component。

爲什麼要用function component？
function component和class component 比起來缺少那麼多功能爲什麼還要用function componet。
function component更易於編寫閱讀和測試
代碼量更少，上手容易
因爲沒有狀態，可以更好的實現容器和表現的分離，可以只負責表現層的邏輯，不用考慮因爲複雜的邏輯去改變狀態從而帶來的麻煩，有利於代碼複用。
react團隊提倡使用


爲什麼要用class component？
雖然function component 有很多好處，但是有些時候class component 還是不可替代的。
當需要實現一些容器組件的時候，需要改變內部狀態來實現自組件的改變的時候。
當需要用到生命週期鉤子函數實現一些功能的時候
當我們需要提升性能時，性能是一個很重要的問題，有些時候我們需要減少組件的渲染次數，我們就需要在組件內部用shouldComponentUpdate 方法來去判斷，或者繼承React.PureComponent 類（自動調用shouldComponentUpdate）來實現state和props的淺比較進行判斷組件是否重新渲染。