ReactJS useEffect Hook - 在组件中多次使用？

Posted 2023-02-21

【中文标题】ReactJS useEffect Hook - 在组件中多次使用？

【英文标题】：ReactJS useEffect Hook - used more than once in a component?

【发布时间】：2022-01-24 01:00:35

【问题描述】：

我已经搜索过这个问题的答案，但我可以找到我需要的东西。在单个组件中，useEffect() 可以多次使用吗？

例如：

export const MyDataForm = (props) => 
    ...    
    useEffect(()=>console.log(var1),[var1]);
    useEffect(()=>console.log(var2),[var2]);
    return (<></>);
   

这是合法的、推荐的还是不推荐的？谢谢！

【问题讨论】：

是的。合法，而且通常很有用。

所以我来一探究竟。感谢您的回复。

【参考方案1】：

是的，这是允许的，并根据您的用例推荐。

useEffect() 允许您的组件订阅对特定状态的更改。您在第二个参数的数组中传递的依赖项是您希望在回调中订阅的依赖项。在一个 useEffect() 中订阅所有这些是没有意义的。

例如，假设您有一个来自 Redux 存储的 user 和 invoices 状态变量。您可能希望在user 更改时执行操作，但在invoices 更改时不执行操作，反之，当invoices 更改但user 更改时执行操作。如果将这两个实体都添加到单个 useEffect() 挂钩的依赖数组中，则回调 when 将在 either 实体发生变化时执行，而不是两者都发生变化。这可能会导致不必要的重新渲染。

您应该添加两个单独的useEffect() 挂钩来实现此目的，例如：

useEffect(() =>  
   // Executed when user changes
, [ user ]);

useEffect(() =>  
    // Executed when invoices changes
, [ invoices ]);

useEffect(() => 
    // Executed when either user OR invoices changes
, [ user, invoices ]);

【参考方案2】：

如果有意义，多次使用 useEffect 没有问题。特别是在您对每个钩子有不同依赖项的情况下。

【讨论】：

这并没有解释为什么你需要使用多个useEffect()钩子。

BemM - 我不问为什么我需要使用多个挂钩。我想知道是否可以做到。

在这种情况下，运行您的代码会回答您的问题。

代码运行成功与良好实践无关

【参考方案3】：

很简单 - 是的，您可以使用任意数量的 useEffects。

鉴于每个钩子都有单独的部门，你可能应该分离逻辑。

我在 React 文档中没有看到任何内容，但他们确实谈到了使用多个 useEffect 和 useState 挂钩 [此处][1]，如果这能让您更有信心做正确的事情。

就我个人而言，我在个人项目和专业环境中都使用了多个 useEffect 挂钩。

[1]：https://reactjs.org/docs/hooks-rules.html#:~:text=Explanation,Form()%20%7B%20%2F%2F%201.&text=Use%20an%20effect%20for%20persisting,%3B%20%7D)%3B%20%2F%2F%203。

【讨论】：

这并没有解释为什么你需要使用多个useEffect()钩子。

他不是这么问的。

我不需要知道我为什么需要它们。我只是想知道它是否可以完成。