## 注意的效率問題 為了提升效率努力讓努力變的更純（pure），減少在組件更新周期的重新渲染； 1，使用react-addons-pure-render-mixin或React.PureComponent可以讓組件自行判斷props（淺層）的變化；幫助我們實現shouldComponentUpdate的控制，減少其他非組件相關數據變化引起的重新渲染； 2，使用了以上內容之后需注意： （1），直接為 props 設置對象或數組等字面量形式： 如：<Item style={{ color: 'black' }} />? 因為每次調用 React 組件其實都會重新創建組件。就算傳入的數組或對象的值沒有改變，它們引用的地址也會發生改變。 解決方法：在外部定義完變量再引用：const defaultStyle = {}; 盡量使用const； （2），不能在組件上綁定事件時不能使用以下兩種形式： 第一種綁定是因為每次調用時會重新bind(this)，導致方法的引用每次都會改變；第二種是每次都會重新生成箭頭函數，導致引用改變。 解決方法：在construct里綁定this； （3），子組件里有子組件： render() { return ( <Item> <span>Arcthur</span> <Item/> ) } } 上面的子組件 JSX 部分翻譯過來，其實是： <Item? ?children={React.createElement('span', {}, 'Arcthur')}? />? 解決方法：子組件設置 PureRender； 4，盡量使用具體的prop，不使用{...props}等形式； 5，map里面添加key，并且key不要使用index（可變的），盡量使用id等判斷。 6，使用?Immutable 進一步提升組件的渲染性能?： （1），為了保存原狀態（刷新或對比時使用）很多時候都會用到淺拷貝或者深拷貝，這個時候會造成?CPU?和內存的浪費，這個時候可以使用Immutable 定義數據，修改數據時不會改變原數據（注意接收返回的新數據），同時Immutable 使用了結構共享（structural?sharing），即如果對象樹中一個節點發生變化，只修改這個節點和受它影響的父節點，其他節點則進行共享，所以也不會引起新的效率問題。 （2），使用PureRender時：以上介紹了PureRender官方提供的形式，而Immutable.js 則提供了簡潔、高效的判斷數據是否變化的方法，只需 === 和 is 比較就能知道是否需要執行 render，而這個操作幾乎零成本，所以可以極大提高性能。使用Immutable 級可以更深入的實現，如下： import { is } from 'immutable'; shouldComponentUpdate(nextProps, nextState) { const thisProps = this.props || {}; const thisState = this.state || {}; if (Object.keys(thisProps).length !== Object.keys(nextProps).length || Object.keys(thisState).length !== Object.keys(nextState).length) { return true; } for (const key in nextProps) { if (nextProps.hasOwnProperty(key) && !is(thisProps[key], nextProps[key])) { return true; } } for (const key in nextState) { if (nextState.hasOwnProperty(key) && !is(thisState[key], nextState[key])) { return true; } } return false;