一、介紹PureComponent
React 15.3在2016.06.29發(fā)布了，這個(gè)版本最值得關(guān)注的是支持了 React.PureComponent ，它取代了之前的 pure-render-mixin 。在本文中，我們將討論 PureComponent 的重要性和使用場(chǎng)景。
React.PureComponent最重要的一個(gè)用處就是優(yōu)化React應(yīng)用，這很容易快速地實(shí)現(xiàn)。使用 React.PureComponent 對(duì)性能的提升是非?？捎^的，因?yàn)樗鼫p少了應(yīng)用中的渲染次數(shù)。
PureComponent改變了生命周期方法 shouldComponentUpdate ，并且它會(huì)自動(dòng)檢查組件是否需要重新渲染。這時(shí)，只有PureComponent檢測(cè)到 state 或者 props 發(fā)生變化時(shí)，PureComponent才會(huì)調(diào)用 render 方法，因此，你不用手動(dòng)寫(xiě)額外的檢查，就可以在很多組件中改變 state ，
例如：
if (this.state.someVal !== computedVal) { this.setState({ someVal: computedVal })}
根據(jù)React源碼，如果組件是純組件(Pure Component)，那么一下比較是很容易理解的：
if (this._compositeType === CompositeTypes.PureClass) { shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);}
其中， shadowEqual 只會(huì)"淺"檢查組件的 props 和 state ，這就意味著嵌套對(duì)象和數(shù)組是不會(huì)被比較的。
深比較操作是非常昂貴的，同時(shí)，如果這個(gè)組件還是純組件(PureComponent)，那么深比較將會(huì)更浪費(fèi)。另外，你也可以使用 shouldComponentUpdate 來(lái)手動(dòng)確定組件是否需要重新渲染。
最簡(jiǎn)單的方式就是直接比較 props 或 state :
shouldComponentUpdate(nextProps, nextState) { return nextProps.user.id === props.user.id;}
除此之外，你可以使用 immutable 屬性。這種情況下，屬性的比較是非常容易的，因?yàn)橐汛嬖诘膶?duì)象不會(huì)發(fā)生改變，取而代之的是重新創(chuàng)建新的對(duì)象。其中， Immutable.js 就是非常好的Immutable庫(kù)。
二、使用PureComponent
PureComponent節(jié)約了我們的時(shí)間，避免了多余的代碼。那么，掌握如何正確使用它是非常重要的，否則如果使用不當(dāng)，它就無(wú)法發(fā)揮作用。因?yàn)镻ureComponent僅僅是淺比較(shadow comparison)，所以改變組件內(nèi)部的 props 或者 state ，它將不會(huì)發(fā)揮作用。例如，讓我們想想這樣一種情況，父組件有一個(gè)render方法和一個(gè)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)，那么這時(shí)它是不會(huì)被渲染的，因?yàn)楸M管 this.state.items 的值發(fā)生了改變，但是它仍然指向同一個(gè)對(duì)象的引用。但是，通過(guò)移除可變對(duì)象就很容易改變這種情況，使之能夠正確被渲染。
handleClick() { this.setState(prevState => ({ words: prevState.items.concat(['new-item']) }));}
如果一個(gè)純組件(PureComponent)的 state 或 props 引用了一個(gè)新對(duì)象，那么這個(gè)組件就會(huì)被重新渲染(re-render)。這暗示著，如果不想損失PureComponent的優(yōu)點(diǎn)，那么我們應(yīng)該避免以下的結(jié)構(gòu)：
<Entity values={this.props.values || []}/>
如上面代碼，新數(shù)組，即便是空數(shù)組，總是會(huì)迫使組件重新渲染。為了避免這個(gè)問(wèn)題，你可以使用 defaultProps ，它包含了一個(gè)屬性的初始化空狀態(tài)。解決這個(gè)問(wèn)題的另一種方法如下：
<CustomInput onChange={e => this.props.update(e.target.value)} />
在純組件(PureComponent)被創(chuàng)建時(shí)，因?yàn)楹瘮?shù)的新對(duì)象被創(chuàng)建了，所以它會(huì)獲得新數(shù)據(jù)，并且重新渲染。解決這個(gè)問(wèn)題最簡(jiǎn)單的方法就是: 在組件的 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} />}
同時(shí)，在JSX中，任何包含子元素(child elements)的組件， shallowEqual 檢查總會(huì)返回false。
請(qǐng)謹(jǐn)記：純組件忽略重新渲染時(shí)，不僅會(huì)影響它本身，而且會(huì)影響它的說(shuō)有子元素，所以，使用PureComponent的最佳情況就是展示組件，它既沒(méi)有子組件，也沒(méi)有依賴應(yīng)用的全局狀態(tài)。
三、總結(jié)
事實(shí)上，如果你已經(jīng)意識(shí)到 shallowEqual 和 JS References 的特性，過(guò)渡到PureComponent是相當(dāng)容易的。正常情況下，遷移的方式非常簡(jiǎn)單，就像改變組件繼承的基類(lèi)，從
class MyComponent extends Component {...}
到
class MyComponent extends PureComponent {...}
這樣不僅能平滑過(guò)渡，甚至可以提升性能。所以，我極力推薦所有人在開(kāi)發(fā)應(yīng)用中使用PureComponent。
四、注意
在純組件有子組件的時(shí)候，所有基于 this.context 改變的子組件， 在 this.context 改變時(shí)， 將不會(huì)重新渲染 ，除非在父組件(Parent ParentComponent)中聲明 contextTypes 。
本文翻譯至 habrahabr 。
來(lái)自：http://www.zcfy.cc/article/why-and-how-to-use-purecomponent-in-react-js-60devs-2344.html
