pureRenderMixin 的實現(xiàn)主要是修改了組件的 shouldComponentUpdate 方法的實現(xiàn)對于組件 state 或 props 變化過后先進(jìn)行一個 shallowCompare(淺比較)的過程在決定是否需要 render 組件從而優(yōu)化相關(guān)渲染性能埃儿。
實現(xiàn)代碼主要為:
// 源文件地址: https://github.com/facebook/react/blob/master/src/addons/ReactComponentWithPureRenderMixin.js
var ReactComponentWithPureRenderMixin = {
shouldComponentUpdate: function(nextProps, nextState){
return shallowCompare(this, nextProps, nextState);
}
}
上面的代碼使用了一個 shallowCompare 的方法默赂，實現(xiàn)代碼如下:
// 源文件地址 https://github.com/facebook/react/blob/master/src/addons/shallowCompare.js
function shallowCompare(instance, nextProps, nextState) {
return (
!shallowEqual(instance.props, nextProps) ||
!shallowEqual(instance.state, nextState)
);
}
可以看到主要的實現(xiàn)都放到 shallowEqual 這個方法里面锌钮，這個方法使用的是一個第三方庫用于淺比較兩個對象是否相等领追。
淺的意義在于隅很，不會去迭代的對對象進(jìn)行深度比較秤茅，只取得對象的 key 的值進(jìn)行比較百侧，對于基礎(chǔ)類型直接比較值是否相等讨韭，對于引用類型只比較其引用是否相等。
簡版的實現(xiàn)如下:
function shallowEqual(objA, objB) {
if(objA === objB) {
return true;
}
var keyA = Object.keys(objA),
keyB = Object.keys(objB);
if(keyA.length != keyB.length) {
return false;
}
for(var idx = 0, len = keyA.length; idx < len; idx++ ) {
var key = keyA[idx];
if(!objB.hasOwnProperty(key)) {
return false;
}
var valueA = objA[key],
valueB = objB[key];
// 無差別比較迟郎，引用類型比較引用剥险，基礎(chǔ)類型直接比較值
if(valueA !== valueB) {
return false;
}
}
return true;
}
完整 shallowEqual 實現(xiàn)代碼地址: https://github.com/dashed/shallowequal/blob/master/src/index.js
更多關(guān)于React渲染性能優(yōu)化，以及為什么使用 pureRenderMixin 和 Immutable Date 的相關(guān)知識可以查看 React爬坑秘籍（一）——提升渲染性能
