什么是 shallowEqual？
shallowEqual 是一个非常有用的 npm 包，它可以比较两个对象是否相等。它会递归比较对象中的所有键值对，如果它们都相等，就认为这两个对象相等。shallowEqual 主要用于 React 中的性能优化，它可以帮助避免不必要的组件重新渲染。
如何使用 shallowEqual？
使用 shallowEqual 很简单。首先，你需要安装它：
--- ------- ------------
然后，在你的代码中引入它：
------ ------------ ---- ---------------
现在，你就可以使用 shallowEqual 来比较两个对象了：
----- ---- - - -- -- -- - -- ----- ---- - - -- -- -- - -- ----- ---- - - -- -- -- - -- ------------------------------ ------- -- ---- ------------------------------ ------- -- -----
在上面的示例中，我们创建了三个对象 obj1、obj2 和 obj3。obj1 和 obj2 是相等的，因为它们包含相同的键值对。而 obj1 和 obj3 不相等，因为它们的 b 属性的值不同。
shallowEqual 的深度和学习意义
shallowEqual 虽然看起来很简单，但它在 React 中的应用非常广泛。React 组件通常会接收一些属性（props），当这些属性发生变化时，组件就会重新渲染。但有时候，我们并不希望组件因为一些不必要的属性变化而重新渲染。这时，shallowEqual 就派上用场了。
举个例子，在一个列表页面中，每个列表项都是一个组件。当我们点击“删除”按钮时，会触发一个 API 请求，请求成功后会更新列表数据，并把新的列表数据作为属性传递给列表组件。假设我们只是更新了列表中的某一项数据，其他数据并没有发生变化，如果没有使用 shallowEqual，整个列表组件都会被重新渲染。但是如果我们在 shouldComponentUpdate 方法中使用 shallowEqual 来比较新旧属性，就可以避免不必要的重新渲染，提高性能。
示例代码
下面是一个完整的示例代码：
------ ------ - --------- - ---- --------
------ ------------ ---- ---------------
----- -------- ------- --------- -
-------------------------------- -
------ ------------------------- -----------
-
-------- -
----- - --- ----- ----------- - - -----------
------ -
-----
---------------
--------------------
------- ----------- -- ------------------------------------
------
--
-
-
----- ---- ------- --------- -
----- - -
------ -
- --- -- ----- ----- --- ------------ ------------ -- --
- --- -- ----- ----- --- ------------ ------------ -- --
- --- -- ----- ----- --- ------------ ------------ -- --
--
--
------------ - ---- -- -
----- -------- - ------------------------------ -- ------- --- ----
--------------- ------ -------- ---
--
-------- -
------ -
-----
---------------------------- -- -
---------
-------------
------------
----------------
------------------------------
----------------------------
--
---
------
--
-
-上面的代码中，我们创建了一个列表组件 List 和一个列表项组件 ListItem。在 ListItem 组件中，我们使用 shouldComponentUpdate 方法来比较新旧属性是否相等，如果不
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/43260