自定义使用效果比较器：ReactJS

Question

我有一个定义如下的状态变量

  const [val, setVal] = useState({ notdone: [], done: [] })

其中 done 具有以下结构

[ { col: "val1", field: "val1", values: [1,2,3]}, { col: "val2", filed: "val2", values:[]  }

我想运行在对每个对象下的 done 和 values 数组进行一些更改时使用效果。在我的例子中，当我 remove/add 一个对象到 done 时，useEffect 被触发。但不是当每个对象的 values 数组内部发生某些变化时。

我怎样才能看到这两个变化

useEffect(() => {
    callback();
 }, [val.done.length]);

使用 use-deep-compare-effect 是可以实现的，但是有没有办法不使用这个外部包就可以做到这一点？

帮助将不胜感激

Answer 1

单独使用外部数组长度是不够有力的比较。最好的counter-example反对它的是一个数组突变，其中一个元素被删除而另一个元素被添加，结果是一个相同长度的数组。

React 的 Object.is 相等性检查也不会执行您寻求的深度相等性检查。

我知道在没有外部依赖的情况下执行此操作的唯一方法是有点 hack，但它有效，是 JSON stringify* 数组，以便使用完整的字符串比较。

useEffect(() => {
  callback();
}, [JSON.stringify(val.done)]);

* 来源基本上是 Dan Abramov

的 twitter 对话

Deep equality checks are generally a bad idea. If the inputs are shallow enough that you think deep equality would still be fast, consider just using [JSON.stringify(obj)] instead. Note it won’t compare functions.

自定义使用效果比较器：ReactJS

Custom use effect comparator : ReactJS

javascript

reactjs

react-hooks

use-effect

use-ref