1: key
react diff演算法同層級比較時利用key來判斷old tree是否存在這樣的乙個key，如果存在則只需更新渲染否則元件會被銷毀並建立key最好如資料庫id一樣。
2: shouldcomponentupdate
預設返回true,當判斷nextstate與this.state並this.props與next.props都相等是可以返回乙個flase來阻止元件更新。
大部分情況下，你可以使用 react.purecomponent 來代替手寫 shouldcomponentupdate。但它只進行淺比較。
3:路由懶載入(使用react.lazy)
api 鏈結.
4: fragments(可以減少dom節點)
api 鏈結.
5:虛擬化長列表 (react-window 和 react-virtualized 是熱門的虛擬滾動庫)
api 鏈結.
該技術在任何給定時間僅渲染一小部分行，並且可以大大減少重新渲染元件所花費的時間以及所建立的dom節點的數量。
6:部署專案時使用react生產版本
7: react.purecomponent
react.purecomponent 與 react.component 很相似。兩者的區別在於 react.component 並未實現 shouldcomponentupdate()，而 react.purecomponent 中以淺層對比 prop 和 state 的方式來實現了該函式。
如果賦予 react 元件相同的 props 和 state，render() 函式會渲染相同的內容，那麼在某些情況下使用 react.purecomponent 可提高效能。
注意react.purecomponent 中的
shouldcomponentupdate() 僅作物件的淺層比較。如果物件中包含複雜的資料結構，則有可能因為無法檢查深層的差別，產生錯誤的比對結果。僅在你的 props 和 state 較為簡單時，才使用 react.purecomponent，或者在深層資料結構發生變化時呼叫 forceupdate() 來確保元件被正確地更新。你也可以考慮使用 immutable 物件加速巢狀資料的比較。
此外，react.purecomponent 中的 shouldcomponentupdate() 將跳過所有子元件樹的 prop 更新。因此，請確保所有子元件也都是「純」的元件。
8: react.memo(functioncomponentname);
給函式元件加shouldcomponentupdate功能
9: usememo & usecallback 減少複雜函式大量計算
usememo當函式引數不變化時，函式不執行且元件不更新
注:以上為react中文官方文件高階指引部分都有寫，react中文官方文件高階指引部分值得仔細看 j
React專案載入效能優化
1.開啟頁面 這個時候頁面是完全空白的。2.首屏渲染 html 和引用的 css 載入完畢，瀏覽器進行首次渲染，有可見的內容出現。我們把首次渲染需要載入的資源體積稱為 首屏體積 3.首次內容渲染 react react dom 業務 載入完畢，應用第一次渲染，頁面主要內容出現。4.可互動 然後應用的...
react專案效能優化方向
react按需載入 react效能優化點 rect 效能 問題 對於react 應用，怎麼優化它的效能？侷限 只關注react框架 回答 以下方向思想 1.應用載入效能 載入過程，頁面渲染過程 cdn 怎麼優化cdn對於靜態資源的快取？快取和回源 cdn上沒有找到資源，到源站上面去拉取 快取重新整理...
react專案 效能優化 首頁優化 載入優化
react路由懶載入 非同步元件 react loadable 以路由元件分割 或者參考 安裝cnpm install react loadable s 如果專案有100個頁面，那laodable.js就需要寫100遍，這樣就感覺有點冗餘了，所以這個我們可以封裝一下 首先，我們建乙個utilsrc ...