pureRenderMixin 的實(shí)現(xiàn)主要是修改了組件的 shouldComponentUpdate 方法的實(shí)現(xiàn)對于組件 state 或 props 變化過后先進(jìn)行一個(gè) shallowCompare(淺比較)的過程在決定是否需要 render 組件從而優(yōu)化相關(guān)渲染性能。
實(shí)現(xiàn)代碼主要為:
// 源文件地址: https://github.com/facebook/react/blob/master/src/addons/ReactComponentWithPureRenderMixin.js
var ReactComponentWithPureRenderMixin = {
shouldComponentUpdate: function(nextProps, nextState){
return shallowCompare(this, nextProps, nextState);
}
}
上面的代碼使用了一個(gè) shallowCompare 的方法，實(shí)現(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)
);
}
可以看到主要的實(shí)現(xiàn)都放到 shallowEqual 這個(gè)方法里面，這個(gè)方法使用的是一個(gè)第三方庫用于淺比較兩個(gè)對象是否相等。
淺的意義在于，不會(huì)去迭代的對對象進(jìn)行深度比較，只取得對象的 key 的值進(jìn)行比較，對于基礎(chǔ)類型直接比較值是否相等，對于引用類型只比較其引用是否相等。
簡版的實(shí)現(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 實(shí)現(xiàn)代碼地址: https://github.com/dashed/shallowequal/blob/master/src/index.js
更多關(guān)于React渲染性能優(yōu)化，以及為什么使用 pureRenderMixin 和 Immutable Date 的相關(guān)知識可以查看 React爬坑秘籍（一）——提升渲染性能
