前言
在前端开发中，我们经常需要比较两个对象是否相等，然而在 React 中，由于 Virtual DOM 的存在，造成了比较对象时的性能问题。为了解决这一问题，我们可以使用 shallow-compare 这个 npm 包。
shallow-compare 只会比较对象的第一层属性，不会递归比较嵌套的属性，因此可以在很大程度上优化比较的性能。接下来，就让我们来学习一下如何使用这个工具包，以及如何进行优化。
安装
首先，我们需要安装 shallow-compare，可以通过以下命令来安装：
npm install shallow-compare
安装成功后，在项目中引入 shallow-compare：
import shallowCompare from 'shallow-compare';
使用
shallowCompare 有两个参数，第一个参数是组件的实例 this，第二个参数是 nextProps 和 nextState，返回值是一个布尔值。
shouldComponentUpdate(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); }
当返回值为 true 时，组件将会被重新渲染；当返回值为 false 时，组件将会跳过渲染，提高性能。
示例
-- -------------------- ---- ------- ------ ------ - ------------- - ---- -------- ------ -------------- ---- ------------------ ----- ----------- ------- ------------- - ------------------ - ------------- ---------- - - ----- ------ ---- --- -- - -------------------------------- ---------- - ------ -------------------- ---------- ----------- - ----------- - -- -- - --------------- ----- ------ --- -- -------- - ---------------------- ----- - ----- --- - - ----------- ------ - ----- -------- ---------- ------- --------- ------- --------------------------------- ------------- ------ -- - - ------ ------- ------------展开代码
在上面的示例中，MyComponent 组件当中包含了一个 handleClick 的方法，该方法用于修改状态 name 的值。由于我们在 shouldComponentUpdate 方法中使用了 shallowCompare，所以只会在修改 name 值时才会触发重新渲染，而在 age 值不变时则不会重新渲染。这一点，在浏览器控制台中的 render 输出也可以看到。
总结
通过使用 shallow-compare，可以避免在比较两个对象是否相等时出现性能问题，从而提高应用的性能。不过，由于 shallowCompare 只会比较第一层属性，所以在比较嵌套的属性时，还需要自行添加逻辑。
最后，相信通过学习本文，你已经可以很好地使用 shallow-compare 这个工具包，并在实践中使用它进行开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4b9b5cbfe1ea061134a
