React中的高階元件，無狀態元件，PureComponent

看風景就發表於2018-08-22
React元件

1. 高階元件

React中的高階元件是一個函式，不是一個元件。

函式的入參有一個React元件和一些引數，返回值是一個包裝後的React元件。相當於將輸入的React元件進行了一些增強。
React的高階元件實際上是裝飾器(Decorator)模式的一種實踐。

2. 無狀態元件(stateless component)

無狀態元件又叫純函式元件，就是沒有state的元件，純展示型元件。

React元件有兩種型別，無狀態元件和類元件，按照寫法又有3種寫法：

1. 函式式定義的 無狀態元件
2. ES5定義的類元件 React.createClass
3. ES6定義的類元件 extends React.component

無狀態元件有如下特點：

1. 元件不會被例項化，無需分配多餘記憶體，渲染效能有所提升
2. 元件不能訪問this物件，沒有例項，自然沒有this，this.state，this.ref均不能訪問
3. 元件不能訪問生命週期方法
4. 元件只能訪問輸入的props，不能修改，同樣的輸入得到一致的輸出，無副作用

3. PureComponent

PureComponent也是Component的一種，其預設實現了shouldComponentUpdate的淺比較，是一種優化了的Component，React 15.3版本釋出。
實現程式碼類似下面：

if (this._compositeType === CompositeTypes.PureClass) {
    shouldUpdate = !shallowEqual(prevProps, nextProps)
    || !shallowEqual(inst.state, nextState);
}

PureComponent在shouldComponentUpdate中對物件只是進行淺比較，如果物件包含巢狀的物件和陣列，則比較會出錯。
實際使用的時候，對單層結構的state可以使用PureComponent，複雜結構的不要使用，否則元件可能不會更新。
此外，儘量不要修改React的state，而是返回一個全新的state。
PureComponent可以和immutable.js配合使用，使用不可變物件來保證元件狀態的比較。

 

 

參考：https://www.cnblogs.com/wonyun/p/5930333.html

相關文章