介绍
@react-dnd/shallowequal是一个npm包，它提供了一种浅层比较的方法，主要用于React DnD库中比较拖拽源和拖拽目标当前的prop（属性）是否相等。比较复杂对象的时，@react-dnd/shallowequal可以减少处理时间而不是一次次比较，提高应用程序的性能。
安装
在使用@react-dnd/shallowequal之前，需要先将其安装到项目中。可以在终端或命令行中使用以下命令进行安装：
npm install @react-dnd/shallowequal
当安装完成后，就可以在项目中使用它了。
使用
@react-dnd/shallowequal的使用非常简单。只需要通过引入包，就可以使用它了。
首先，我们需要将@react-dnd/shallowequal引用到应用中：
import shallowEqual from '@react-dnd/shallowequal';
然后我们可以在代码中使用该方法：
class Component extends React.PureComponent {
shouldComponentUpdate(nextProps, nextState) {
return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
}
}如上例所示，我们可以使用以上代码来比较当前组件的props和state是否与下一个组件相同，如果是则不需要更新组件。
示例代码
为了更好地说明@react-dnd/shallowequal的使用方法，以下是一个关于@react-dnd/shallowequal的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------ ---- --------------------------
----- ------- ------- ------------------- -
----- - - ---- ----- --
-- ----- - ----- ----------
-------------------------------- ---------- -
------ ------------------------- ---------- -- ------------------------- -----------
-
-------- -
----------------------
------ ----------------------------
-
-
----- ------- - - ----- ------ --
----- --- - -- -- -
----- ------- --------- - ---------------- ------ - ---
------ -
-----
------- ----------- -- ---------- ------ ----------- - - ----
----- --
---------
-------- ------------ --
------
--
-当我们点击"Click me"按钮时，App组件的state会更新，但由于Example组件中使用的是 shallowEqual比较，因此不会重新渲染Example组件。这种方式可以提高应用程序的性能，尤其是在比较深层对象的时候。
结论
@react-dnd/shallowequal是一个非常简化应用中比较比较复杂对象的方法，尤其是在React DnD库中作为性能优化再好不过。不难看出，React DnD本身的设计和性能都非常优秀，因此需要我们好好利用和发挥它的作用，这也能有效减少开发的工作量且提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedba76b5cbfe1ea06118e9