鍍金池/ 教程/ HTML/ PureRenderMixin
顯示數(shù)據(jù)
組件的引用
Controlled Input 值為 null 的情況
Reconciliation
子 props 的類型
組件的詳細說明和生命周期
傳遞 Props
特殊的非 DOM 屬性
組件 API
PureRenderMixin
雙向綁定輔助工具
瀏覽器中的工作原理
深入 JSX
表單組件
Dangerously Set innerHTML
入門
JSX 中的 If-Else
克隆組件
教程
更多的關于Refs
JSX 的 false 處理
高級性能
Mounting 后 componentWillReceiveProps 未被觸發(fā)
簡介
測試工具集
JSX 陷阱
工具集成(ToolingIntegration)
公開組件功能
通過 AJAX 加載初始數(shù)據(jù)
事件系統(tǒng)
可復用組件
this.props.children undefined
不可變數(shù)據(jù)的輔助工具(Immutability Helpers)
動態(tài)交互式用戶界面
組件的 DOM 事件監(jiān)聽
復合組件
動畫
插件
JSX 展開屬性
行內(nèi)樣式
性能分析工具
類名操作
與其他類庫并行使用 React
鍵控的片段
標簽和屬性支持
組件間的通信
React (虛擬)DOM 術語
JSX 根節(jié)點的最大數(shù)量
在樣式props中快速制定像素值
頂層 API
深入理解 React
自閉合標簽
為什么使用 React?
getInitialState 里的 Props 是一個反模式
與 DOM 的差異

PureRenderMixin

如果你的React組件的渲染函數(shù)是“純粹的”(換句話說,當傳給它同樣的props和state,它渲染出同樣的效果),在某些場景下,你可以利用這個插件來極大地提升性能。

例如:

var PureRenderMixin = require('react').addons.PureRenderMixin;
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

在底層,該插件實現(xiàn)了shouldComponentUpdate,在這里面,它比較當前的props、state和接下來的props、state,當兩者相等的時候返回false。

注意:

僅僅是淺比較對象。如果對象包含了復雜的數(shù)據(jù)結構,深層次的差異可能會產(chǎn)生誤判。僅用于擁有簡單props和state的組件,或者當你知道很深的數(shù)據(jù)結構已經(jīng)變化了的時候使用forceUpdate()?;蛘?,考慮使用immutable objects來幫助嵌套數(shù)據(jù)快速比較。

此外,shouldComponentUpdate會跳過更新整個組件子樹。確保所有的子組件也是“純粹的”。