React useEffect() ：比较两个对象数组是否相等的最有效方法

Question

我有一个 useEffect() ，当对象数组发生变化时应该触发它。

  useEffect(() => {
      setNotesToRender(props.notes)
  }, [props.notes]);

useEffect 依赖项无法比较对象数组，因此上例中的 useEffect() 触发的次数超出了需要的次数。我只希望在数组不同时触发 useEffect() 。

应触发更新的数组示例

array1 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three'}]
array2 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'four'}]

到目前为止我测试过的事情是：

1. props.notes.length --> 可以工作，但不可靠 - 原因很明显:)

2. ...props.notes --> 如果数组为空则不起作用 - 并且可能会导致严重的性能问题？

比较两个对象数组的最有效方法是什么？数组可能包含超过 1000 个对象。

亲切的问候/K

更新 我需要稍后使用文本搜索过滤掉某些“注释”，这就是我使用 React 状态的原因。我的示例代码中没有显示这一点。

Answer 1

最有效的方法是什么最有效的方法可能是针对这种特定形状的数据进行自定义比较。您可以使用JSON.stringify或其他一些通用比较函数，但由于显而易见的原因，它不太可能是最有效的。因此，在您的示例中，一个简单的比较函数可能看起来像 ->const array1 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'three'}];const array2 = [{id:1,title:'one'},{id:2,title:'two'},{id:3,title:'four'}];const arrayIsEqual = (a1, a2) =>   a1 === a2 ||  a1.length === a2.length &&  a1.every((f,i) =>     f.id === a2[i].id &&    f.title === a2[i].title  )    //testsconst a1clone = [...array1];//different arrays not equalconsole.log(arrayIsEqual(array1, array2)); //false//different arrays equalconsole.log(arrayIsEqual(array1, a1clone)); //true//different arrays same values, but different ordera1clone.reverse();console.log(arrayIsEqual(array1, a1clone)); //false//same arrays, fastest checkconsole.log(arrayIsEqual(array1, array1)); //true

Answer 2

首先1k个对象并不是一个大量的对象，但是回到问题：最简单的方法是使用JSON.stringify(object1) === JSON.stringify(object2);但这并不是最有效的，当性能成为问题时，我能想到的最明智的事情是使用元属性，例如，version每当我们以任何方式更新对象时，我们也会增加版本。然后你所要做的就是根据 id + version 映射检查两个数组。如果不需要第二个选项，您可以使用lodash.deepCompare或创建自己的函数。

Answer 3

确实，useEffect无法比较对象数组，因此让useEffect钩子运行。但你可以做的是添加一个if-statement是否JSON.stringified notesToRender and JSON.stringified props.notes相等。（或者你可以使用lodash/isEqual）来阻止设置状态方法运行。useEffect但是，如果您认为这仍然不是一个有效的解决方案，我们首先必须看看您为什么需要。从您的代码来看，我认为您正在useState根据传入的道具设置一个钩子。再想一想，为什么不考虑直接渲染道具呢。来自官方 React 文档页面：https://reactjs.org/docs/thinking-in-react.html#step-3-identify-the-minimal-but-complete-representation-of-ui-state它是通过 props 从父级传递的吗？如果是这样，它可能不是状态。随着时间的推移它会保持不变吗？如果是这样，它可能不是状态。您可以根据组件中的任何其他状态或道具来计算它吗？如果是这样，那么它就不是状态。