react性能優(yōu)化

1. code splitting

   • 入口起點：使用 entry 配置手動地分離代碼袖外。

   • 防止重復(fù)：使用 SplitChunks 去重和分離 chunk晕窑。

   • 動態(tài)導(dǎo)入：通過模塊的內(nèi)聯(lián)函數(shù)調(diào)用來分離代碼。

     import { add } from './math';
     console.log(add(16, 26));
     // 改寫成動態(tài) import 迟螺，首次加載時不去加載 math ,減少首次加載資源的體積。 ↓↓↓
     import("./math").then(math => {
       console.log(math.add(16, 26));
     });
     
     // 引用react的高階組件react-loadable進行動態(tài)import烈掠。
     const LoadableComponent = Loadable({
       loader: () => import('./my-component'),
       loading: Loading,
     });// 先展示一個 loading-component胳搞，然后動態(tài)加載 my-component 的代碼会前，組件代碼加載完畢之后替換掉 loading-component
     

2. shouldComponentUpdate避免重復(fù)渲染

   • 比較組件的props和state是否真的發(fā)生變化，如果發(fā)生變化則返回true蛔溃，否則返回false绰沥。
   • React提供了一個輔助對象來實現(xiàn)這個邏輯 - 繼承自React.PureComponent篱蝇。

3. 使用不可突變的數(shù)據(jù)結(jié)構(gòu)

   • 數(shù)據(jù)突變（mutated）是指變量的引用沒有改變（指針地址未改變），但是引用指向的數(shù)據(jù)發(fā)生了變化（指針指向的數(shù)據(jù)發(fā)生變更）徽曲；PureComponent 僅僅對 this.props.words的新舊值進行“淺比較”零截。
   • 數(shù)組使用concat,對象使用Object.assign()
   • ES6支持?jǐn)?shù)組或?qū)ο蟮膕pread語法
   • 使用不可突變數(shù)據(jù)immutable.js

4. 組件盡可能拆分、解耦

   • 組件盡可能的細(xì)分秃臣，比如一個input+list組件涧衙，可以將list分成一個PureComponent，只在list數(shù)據(jù)變化時更新奥此。否則在input值變化頁面重新渲染的時候弧哎，list也需要進行不必要的DOM diff。

5. 列表類組件優(yōu)化

   • 對于一個基于排序的組件渲染：為組件添加一個key屬性以唯一的標(biāo)識組件稚虎，直接使用insertBefore操作移動組件位置撤嫩，而這個操作是移動DOM節(jié)點最高效的辦法

6. bind函數(shù)優(yōu)化

   • constructor綁定：this.handleClick = this.handleClick.bind(this);只在組件初始化的時候執(zhí)行一次
   • 使用時綁定：<p onClick={this.handleClick.bind(this)}>每次render都會執(zhí)行
   • 使用箭頭函數(shù)：<Test click={() => { this.handleClick() }}/>每一次render時候都會生成新的箭頭函數(shù)。

7. 不要濫用props

   • 盡量只傳需要的數(shù)據(jù)蠢终，避免多余的更新序攘，盡量避免使用{...props}

8. reactDOMServer進行服務(wù)端渲染組件

   • 為了實現(xiàn)SSR，你可能會用nodejs框架（Express蜕径、Hapi两踏、Koa）來啟動一個web服務(wù)器，接著調(diào)用 renderToString 方法去渲染你的根組件成為字符串兜喻，最后你再輸出到 response梦染。
   • 客戶端使用render方法來生成HTMLReactDOM.render(<MyPage />, document.getElementById('app'));

9. react 性能檢測工具

   • react-addons-perf：

     • Perf.start() 開始記錄
     • Perf.stop() 結(jié)束記錄
     • Perf.printInclusive() 查看所有設(shè)計到的組件render
     • Perf.printWasted() 查看不需要的浪費組件render

   • react16版本的方法，在url后加上?react_pref朴皆，就可以在chrome瀏覽器的performance帕识，我們可以查看User Timeing來查看組件的加載時間。