pureRenderMixin 的實(shí)現(xiàn)主要是修改了組件的 shouldComponentUpdate 方法的實(shí)現(xiàn)對于組件 state 或 props 變化過后先進(jìn)行一個 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);
    }
}

上面的代碼使用了一個 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 這個方法里面，這個方法使用的是一個第三方庫用于淺比較兩個對象是否相等。
淺的意義在于，不會去迭代的對對象進(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爬坑秘籍（一）——提升渲染性能