在React.js中使用PureComponent的重要性和使用方式

本文為翻譯: Why and How to Use PureComponent in React.js，首發於 在React.js中使用PureComponent的重要性和使用方式 - 眾成翻譯

一、介紹PureComponent

React 15.3在2016.06.29發布了，這個版本最值得關注的是支持了React.PureComponent，它取代了之前的pure-render-mixin。在本文中，我們將討論PureComponent的重要性和使用場景。

React.PureComponent最重要的一個用處就是優化React應用，這很容易快速地實現。使用React.PureComponent對性能的提升是非常可觀的，因為它減少了應用中的渲染次數。

PureComponent改變了生命周期方法shouldComponentUpdate，並且它會自動檢查組件是否需要重新渲染。這時，只有PureComponent檢測到state或者props發生變化時，PureComponent才會調用render方法，因此，你不用手動寫額外的檢查，就可以在很多組件中改變state， 例如：

if (this.state.someVal !== computedVal) { this.setState({ someVal: computedVal })}

根據React源碼，如果組件是純組件(Pure Component)，那麼一下比較是很容易理解的：

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

其中，shadowEqual只會"淺"檢查組件的props和state，這就意味著嵌套對象和數組是不會被比較的。

深比較操作是非常昂貴的，同時，如果這個組件還是純組件(PureComponent)，那麼深比較將會更浪費。另外，你也可以使用shouldComponentUpdate來手動確定組件是否需要重新渲染。最簡單的方式就是直接比較props或state:

shouldComponentUpdate(nextProps, nextState) { return nextProps.user.id === props.user.id;}

除此之外，你可以使用immutable屬性。這種情況下，屬性的比較是非常容易的，因為已存在的對象不會發生改變，取而代之的是重新創建新的對象。其中，Immutable.js就是非常好的Immutable庫。

二、使用PureComponent

PureComponent節約了我們的時間，避免了多餘的代碼。那麼，掌握如何正確使用它是非常重要的，否則如果使用不當，它就無法發揮作用。因為PureComponent僅僅是淺比較(shadow comparison)，所以改變組件內部的props或者state，它將不會發揮作用。例如，讓我們想想這樣一種情況，父組件有一個render方法和一個click處理方法：

handleClick() { let {items} = this.state items.push("new-item") this.setState({ items })}render() { return ( <div> <button onClick={this.handleClick} /> <ItemList items={this.state.items} /> </div> )}

如果ItemList是純組件(PureComponent)，那麼這時它是不會被渲染的，因為儘管this.state.items的值發生了改變，但是它仍然指向同一個對象的引用。但是，通過移除可變對象就很容易改變這種情況，使之能夠正確被渲染。

handleClick() { this.setState(prevState => ({ words: prevState.items.concat(["new-item"]) }));}

如果一個純組件(PureComponent)的state或props引用了一個新對象，那麼這個組件就會被重新渲染(re-render)。這暗示著，如果不想損失PureComponent的優點，那麼我們應該避免以下的結構：

<Entity values={this.props.values || []}/>

如上面代碼，新數組，即便是空數組，總是會迫使組件重新渲染。為了避免這個問題，你可以使用defaultProps，它包含了一個屬性的初始化空狀態。解決這個問題的另一種方法如下：

<CustomInput onChange={e => this.props.update(e.target.value)} />

在純組件(PureComponent)被創建時，因為函數的新對象被創建了，所以它會獲得新數據，並且重新渲染。解決這個問題最簡單的方法就是: 在組件的constructor方法中使用bind。

constructor(props) { super(props) this.update = this.update.bind(this)}update(e) { this.props.update(e.target.value)}render() { return <MyInput onChange={this.update} />}

同時，在JSX中，任何包含子元素(child elements)的組件，shallowEqual檢查總會返回false。

請謹記：純組件忽略重新渲染時，不僅會影響它本身，而且會影響它的說有子元素，所以，使用PureComponent的最佳情況就是展示組件，它既沒有子組件，也沒有依賴應用的全局狀態。

三、總結

事實上，如果你已經意識到shallowEqual和JS References的特性，過渡到PureComponent是相當容易的。正常情況下，遷移的方式非常簡單，就像改變組件繼承的基類，從

class MyComponent extends Component {...}

到

class MyComponent extends PureComponent {...}

這樣不僅能平滑過渡，甚至可以提升性能。所以，我極力推薦所有人在開發應用中使用PureComponent。

四、注意

在純組件有子組件的時候，所有基於this.context改變的子組件，在this.context改變時， 將不會重新渲染，除非在父組件(Parent ParentComponent)中聲明contextTypes。

本文翻譯至habrahabr。

版權聲明

本譯文僅用於學習、研究和交流目的，歡迎非商業轉載。轉載請註明出處、譯者和眾成翻譯的完整鏈接。要獲取包含以上信息的本文Markdown源文本，請點擊這裡。
推薦閱讀：