背景
React 使用了 PureComponent，在 shouldComponentUpdate 进行浅比较，这里到底什么是浅比较呢？
shallowEqual
在React里，shouldComponentUpdate源码为：
if (this._compositeType === CompositeTypes.PureClass) {
shouldUpdate = !shallowEqual(prevProps, nextProps) || !shallowEqual(inst.state, nextState);
}
可以看到PureComponent就是对props跟state的前后状态做了一个浅比较。
看看shallowEqual的源码:
const hasOwn = Object.prototype.hasOwnPropertyfunctionis(x, y) {
if(x === y) {
returnx !==0 || y !==0 ||1/ x ===1/ y
} else {
returnx !== x && y !== y
}
}
export default function shallowEqual (objA, objB) {
if ( is(objA, objB ))
return true
i f( typeofobjA !=='object' || objA === null || typeofobjB !=='object' || objB ===null) {
return false
}
const keysA = Object.keys ( objA )
const keysB = Object.keys ( objB )
if ( keysA.length !== keysB.length)
return false
for ( leti =0; i < keysA.length; i++) {
if ( !hasOwn.call ( objB, keysA[i] ) || !is(objA[keysA[i]], objB[keysA[i]])) {
return false
}
}
return true
}
Object.is()
在解析 shallowEqual的源码之前，先来认识一下 Object.is()，这个函数是用来比较两个值是否相等。
为什么要用这个来比较而不是 == 或者 === 呢？
==
首先先看 ==，由于 JS 是弱类型的，如果使用 == 进行比较，== 操作符会自动将 0，‘’（空字符串），null，undefined 转成布尔型 false，这样就会出现
0==' '// true
null==undefined// true
[1] ==true// true
这显然是不符合预期的。所以 JS 为我们提供了全等操作符 ===，它不会进行类型转换，也就是说如果两个值一样，必须符合类型也一样。但是，它还是有两种疏漏的情况
+0 === -0//true，但我们期待它返回falseNaN===NaN//false，我们期待它返回true
所以，Object.is() 修复了 `=== 这两种判断不符合预期的情况，
function (x, y){
// SameValue algorithm
if(x === y) {
// 处理为+0 != -0的情况
returnx !==0 || 1/ x ===1/ y;
} else {
// 处理 NaN === NaN的情况
return x !== x && y !== y;
}
};
这样就使得 Object.is() 总是返回我们需要的结果。 它在下面6种情况下，会返回 true
- 两个值都是
undefined - 两个值都是
null - 两个值都是
true或者都是false - 两个值是由相同个数的字符按照相同的顺序组成的字符串
- 两个值指向同一个对象
- 两个值都是数字并且
- 都是正零
+0 - 都是负零
-0
- 都是正零
- 都是
NaN - 都是除零和
NaN外的其它同一个数字
可以看出Object.is 可以对基本数据类型: null,undefined,number,string,boolean做出非常精确的比较，但是对于引用数据类型是没办法直接比较的。
剖析 shallowEquall
// 用原型链的方法
const hasOwn = Object.prototype.hasOwnProperty
// 这个函数实际上是 Object.is() 的 polyfill
functionis (x, y) {
if (x === y) {
returnx !==0 || y !==0 ||1/ x === 1/ y
} else {
returnx !== x && y !== y
}
}
export default function shallowEqual (objA, objB) {
// 首先对基本数据类型的比较
if (is(objA, objB))
return true
// 由于 Obejct.is() 可以对基本数据类型做一个精确的比较， 所以如果不等
// 只有一种情况是误判的，那就是 object, 所以在判断两个对象都不是 object
// 之后，就可以返回 false 了
if (typeofobjA !== 'object' || objA === null || typeofobjB !== 'object' || objB ===null ) {
return false
}
// 过滤掉基本数据类型之后，就是对对象的比较了
// 首先拿出 key 值，对 key 的长度进行对比
const keysA = Object.keys( objA)
const keysB = Object.keys(objB)
// 长度不等直接返回 false
if (keysA.length !== keysB.length)
return false
// key 相等的情况下，在去循环比较
for (let i =0; i < keysA.length; i++) {
// key值相等的时候
// 借用原型链上真正的 hasOwnProperty 方法，判断ObjB里面是否有A的key的key值
// 属性的顺序不影响结果也就是 {name:'daisy', age:'24'} 跟 {age:'24'，name:'daisy' } 是一样的
// 最后，对对象的value进行一个基本数据类型的比较，返回结果
if( !hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])){
return false
}
}
return true
}
总结
回到最开始的问题，浅比较为什么没办法对嵌套的对象比较？
由上面的分析可以看到，当对比的类型为Object的时候并且key的长度相等的时候，浅比较也仅仅是用Object.is()对Object的value做了一个基本数据类型的比较，所以如果key里面是对象的话，有可能出现比较不符合预期的情况，所以浅比较是不适用于嵌套类型的比较的。
