pureRenderMixin 的实现主要是修改了组件的 shouldComponentUpdate 方法的实现对于组件 state 或 props 变化过后先进行一个 shallowCompare(浅比较)的过程在决定是否需要 render 组件从而优化相关渲染性能。
实现代码主要为:
// 源文件地址: https://github.com/facebook/react/blob/master/src/addons/ReactComponentWithPureRenderMixin.js
var ReactComponentWithPureRenderMixin = {
shouldComponentUpdate: function(nextProps, nextState){
return shallowCompare(this, nextProps, nextState);
}
}
上面的代码使用了一个 shallowCompare 的方法，实现代码如下:
// 源文件地址 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)
);
}
可以看到主要的实现都放到 shallowEqual 这个方法里面，这个方法使用的是一个第三方库用于浅比较两个对象是否相等。
浅的意义在于，不会去迭代的对对象进行深度比较，只取得对象的 key 的值进行比较，对于基础类型直接比较值是否相等，对于引用类型只比较其引用是否相等。
简版的实现如下:
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];
// 无差别比较，引用类型比较引用，基础类型直接比较值
if(valueA !== valueB) {
return false;
}
}
return true;
}
完整 shallowEqual 实现代码地址: https://github.com/dashed/shallowequal/blob/master/src/index.js
更多关于React渲染性能优化，以及为什么使用 pureRenderMixin 和 Immutable Date 的相关知识可以查看 React爬坑秘籍（一）——提升渲染性能
