将多个 UseEffect 重构为一个有什么缺点？答案

【问题标题】：What are the disadvantages of refactoring multiple UseEffect into one?将多个 UseEffect 重构为一个有什么缺点？
【发布时间】：2022-01-04 08:52:05
【问题描述】：

我为不同的回调函数使用了多个 useEffect。现在，我到了know，我可以将多个 useEffect 重构为一个，所有回调函数都有不同的依赖关系，所以将所有 useEffect 重构为一个是个好主意，还是有更好的方法来优化代码不需要使用多个 useEffect 还是使用多个 useEffect 是常见的做法？

【问题讨论】：

如果对于不同的组件，您需要不同的副作用，那么可能会使用不同的 useEffects - 所以我会说这取决于用例。
从广义上讲，在具有不同依赖项的情况下重构这种情况并不是一个好主意。在您认为使用更少的代码或更少的功能是更优化的代码的意义上，您似乎有偏见。然而，这仅在“代码行”优化意义上进行了优化。如果您在每个效果中有重复的部分，请确保将它们提取到它们自己的函数中，但不要将所有效果移到一个中以减少 useEffect 的行数，这不是实际的优化。

标签： reactjs react-hooks use-effect

【解决方案1】：

它取决于您的依赖项（您的 useEffect 的）和组件，我认为最好为每个概念拆分 useEffect，例如在一个 useEffect 中您有 api 调用，而在另一个 useEffect 中您有事件侦听器并删除侦听器和依赖关系，因为我认为如果将它们结合起来，可能会产生意想不到的重新渲染和副作用

【讨论】：

如果用例就像我们有一个空的数组依赖，即[]，那么合并好吗？
@RitikBanger ，我认为让你的 useEffect 尽可能简单是件好事，如果你看到它在 useEffect 中做另一项工作，请将它们分开，我认为它也与你的约定有关

【解决方案2】：

您希望在useEffect 上关注每个不同的问题。因此，在您提到的示例中，您希望在 useEffect 上添加和删除侦听器。如果您还有其他顾虑，请添加不同的useEffect。检查的好方法是您是否可以从组件中删除 useEffect 并且其余部分不会受到影响

【讨论】：