React 的 pureRenderMixin 的实现

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爬坑秘籍（一）——提升渲染性能

React 的 pureRenderMixin 的实现

推荐阅读更多精彩内容