#知识点记录# 今天看了 React.PureComponent 的源码，理解了一下浅比较和深比较。PureComponent 是对 shouldComponentUpdate 的浅比较实现，为什么是浅比较？这就是在性能和效果上做的取舍。
对象浅比较就是比较引用，引用相同，则为 true。深比较是比较值，即使是两个引用不同的对象，他们的值也会被一个一个拿出来进行比较。
在 React 中，在状态也就是 state 发生变化时，会对虚拟 DOM 进行 diff，然后重建对应节点。React 中始终贯穿数据不可变的思想，进行 diff 的时候，拿的是两个数据进行比对，它们的 reference 是不同的。如果进行深比较，会把对应的值拿出来，一一比对值。
而对于浅比较，在源码实现中是用的 Object.is()，这个方法只适用于比较基本类型，而对于对象这种引用类型，如果对象的引用不同就为 false。而 React 里面虚拟 DOM 的 diff，数据的引用就是不同的。所以 PureComponent 进行浅比较，state 里面的对象的变化它比较不出来，也就不会阻止 render。管他什么几层嵌套对象，只要是对象就比较不出来。因为引用不同。
所以 PureComponent ，只能比较出 state、props 里基本数据类型的变化，对象的变化比不出来，也就无法阻止对应的 render。所以，在实际开发中，使用 PureComponent，要注意对应组件里的 state 的数据结构是什么样的，否则达不到通过 PureComponent 进行性能优化的目的。
鄙人拙见，如有纰漏，烦请指出，十分感谢！
对象浅比较就是比较引用，引用相同，则为 true。深比较是比较值，即使是两个引用不同的对象，他们的值也会被一个一个拿出来进行比较。
在 React 中，在状态也就是 state 发生变化时，会对虚拟 DOM 进行 diff，然后重建对应节点。React 中始终贯穿数据不可变的思想，进行 diff 的时候，拿的是两个数据进行比对，它们的 reference 是不同的。如果进行深比较，会把对应的值拿出来，一一比对值。
而对于浅比较，在源码实现中是用的 Object.is()，这个方法只适用于比较基本类型，而对于对象这种引用类型，如果对象的引用不同就为 false。而 React 里面虚拟 DOM 的 diff，数据的引用就是不同的。所以 PureComponent 进行浅比较，state 里面的对象的变化它比较不出来，也就不会阻止 render。管他什么几层嵌套对象，只要是对象就比较不出来。因为引用不同。
所以 PureComponent ，只能比较出 state、props 里基本数据类型的变化，对象的变化比不出来，也就无法阻止对应的 render。所以，在实际开发中，使用 PureComponent，要注意对应组件里的 state 的数据结构是什么样的，否则达不到通过 PureComponent 进行性能优化的目的。
鄙人拙见，如有纰漏，烦请指出，十分感谢！
展开
8
8
![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)