## 注意的效率問題
為了提升效率努力讓努力變的更純(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;
- 序言
- 環境搭建
- node環境安裝
- npm國內源切換
- git知識學習
- git安裝
- git基本操作
- gitSSH配置
- vscode安裝使用
- 安裝
- git使用
- 前端開發環境
- 安裝腳手架及創建頁面
- 框架源碼目錄結構
- 相關API
- 項目啟動
- 如何運行
- 如何兼容到IE8
- 啟動參數說明
- IE8環境下兼容總結
- 注意的效率問題
- 框架亮點
- 相關技術棧介紹
- 功能強大的UI組件庫
- 數據驅動視圖
- 通用的公共類庫
- 組件視圖生成器
- 嵌入第三方站點
- 簡單易用-react
- 簡單易用-redux
- 1分鐘入門示例(hello world)
- 高級概念
- 入門概念
- 高級概念-1
- 前后端聯調
- 其它常用場景
- 詳細介紹(action、data、reducer)
- action.js
- data.js
- reducer.js
- 進階
- Mock數據
- 引入第三方插件
- 模塊拆分
- iframe接入
- 頁面模型生成器
- webpack@3升級到4.x
- 生產部署
- 生產打包
- nginx部署
- tomcat部署
- hbuilder打包部署
- nodejs部署
- docker部署
- 常見問題
- 兼容IE8
- 自動升級
- 貢獻模板
- 瀏覽器支持統計
- 前端調試
- 注意事項(重要)
- 內存泄漏
- JavaScript內存那點事