在空数组更改中触发 React UseEffect 函数答案

【问题标题】：React UseEffect function triggering in empty array change在空数组更改中触发 React UseEffect 函数
【发布时间】：2020-12-23 09:50:03
【问题描述】：

如果 prop 值从一个空数组更改为另一个空数组，我正在开发的 react 应用程序会触发 userEffect 函数。

我从页面获取查询参数并将它们传递到一个组件中，如果任何查询参数数组发生更改，该组件将重新呈现。但问题是useEffect 函数会触发并重新渲染组件，即使查询参数数组从[] 更改为[]。

我知道[] !== []，也许这就是导致问题的原因。但是有没有办法让应用程序一开始就阻止触发 useEffect 函数？

【问题讨论】：

目前还不清楚您到底要做什么。您究竟希望useEffect 何时运行？
@jered ，只是不想在 prop 从 [] 更改为 [] 时触发它
为什么不在 useEffect 中使用 if-else？它仍然会触发函数，但函数仍然可以决定要做什么
@MuhammedB.Aydemir，也许我可以使用 if 语句来检查长度。如果查询参数从 ['some-data'] to []` 更改会发生什么。你是怎么处理的？
如果组件针对这种边缘情况重新渲染，是否会出现问题（性能）？有什么顾虑？

【解决方案1】：

您正在为测试分配一个新引用，因此它正在触发更新。

您应该重新分配相同的数组并对其进行操作。

   const handleClick = () => {
   const arr = test
    setTest(arr);
  };

【讨论】：

【解决方案2】：

您可以创建自己的自定义钩子来检查每个依赖项数组项的深度相等性，也可以使用类似use-deep-compare-effect的钩子

【讨论】：

【解决方案3】：

【讨论】：

不起作用。这是一个演示：codesandbox.io/s/affectionate-currying-fkbh1?file=/src/Test.js
你说的是<Test />的道具吗？您没有在该组件上传递任何内容，但这对您遇到的问题来说并不是什么大问题。您的 setTest 将重新呈现 App 组件，该组件随后会重新呈现其子组件。