React class & function component 的區別

function和class component

首先看下function component：

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

它就是一個函數接受一個props參數返回了一個jsx語法的標簽，接下來看下class 語法的component

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

這兩個component是等效的，但是我們應該怎么選擇使用呢？

 

 

function和class component 的區別

1.syntax 語法：functional component語法更簡單，只需要傳入一個props參數，返回一個react片段。class component 要求先繼承React.Component然后常見一個render方法，在render里面返回react片段。下面是兩者被Babel編譯過的代碼

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。

1. function component更易於編寫閱讀和測試
2. 代碼量更少，上手容易
3. 因為沒有狀態，可以更好的實現容器和表現的分離，可以只負責表現層的邏輯，不用考慮因為復雜的邏輯去改變狀態從而帶來的麻煩，有利於代碼復用。
4. react團隊提倡使用

 

為什么要用class component？

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

 

參考： Functional vs class components

            Functional vs Class-Components in React