我需要为每个道具更改创建不同的 useEffect 吗？

Posted 2023-02-22

【中文标题】我需要为每个道具更改创建不同的 useEffect 吗？

【英文标题】：Do i need to create different useEffect for every prop change?

【发布时间】：2019-11-03 21:55:03

【问题描述】：

我有三个道具在商店里，当其中任何一个发生变化时，useEffect 就会运行。 所以我的问题是，我需要为每个道具的变化分别创建不同的 useEffect 吗？这样只有与特定道具相关的代码才能工作。

我只尝试了一种 useEffect 并改变了所有道具。

>   useEffect(() => 
>     if (loadingResponse) 
>       setLoader(true);
>     
> 
>     checkVerifyLink(verifyPwdLinkResponse);
> 
>     if (!isEmpty(resetPasswordResponse)) 
>       if (resetPasswordResponse.errors) 
>         // do something
>       
>        , [resetPasswordResponse, verifyPwdLinkResponse, loadingResponse]);

每当我的“loadingResponse”道具发生变化时，其他两个函数也会运行，这是预期的，但如果说我的组件中有 4-5 个道具，我也不想创建 4-5 个不同的 useEffect。

【问题讨论】：

Should I use one or many useEffect in component?的可能重复

【参考方案1】：

如果useEffect的内容只依赖一个props，而你在hook的状态下使用了更多props，你的表现就不会那么好。

在 useEffect 中组合道具适用于效果内容取决于所有这些道具的情况。

通过这种方式，您将提高应用的性能。这就是为什么 useEffect 在性能方面比通常的 React 生命周期更好的原因。

如果您的 checkVerifyLink(verifyPwdLinkResponse) 函数需要在您的至少一个道具 (resetPasswordResponse, verifyPwdLinkResponse, loadingResponse) 发生更改时被调用，那么这是使用它的正确方法，因为它会降低您的代码可重复性，从而导致代码更清晰。

否则，如果仅在 loadingResponse 道具更改时才需要调用其他两个函数，则这将是您的情况的更好方法：

useEffect(() => 
  if (loadingResponse) 
   setLoader(true);
  
, [loadingResponse]);

useEffect(() => 
  checkVerifyLink(verifyPwdLinkResponse);
, [verifyPwdLinkResponse, loadingResponse]);

useEffect(() => 
  if (!isEmpty(resetPasswordResponse)) 
    if (resetPasswordResponse.errors) 
      // do something
    
  
, [resetPasswordResponse, loadingResponse]);

【讨论】：

所以这意味着如果我有 4 种不同的道具并且对所有人都有不同的功能，我应该创建 4 种不同的 useEffect？而且每个 useEffect 也是第一次运行，所以它是否会降低我的应用程序的性能？

@wizkhalifa 没错。如果 function a() 需要仅在 prop b 更改时调用，请始终为其创建单独的 useEffect。

【参考方案2】：

根据 React Conf 中的 Dan Abramov。 2018 “使用钩子，我们分离代码不是基于生命周期方法名称，而是基于代码正在做什么”

所以我们不应该将 useEffect 与生命周期方法进行比较，并根据我们在应用程序中的需要使用它。

【讨论】：

已经为您提供了全面的答案，并对您的代码进行了解释和更正。您没有选择它，而是决定引用一个没有逻辑解释的人，这构成了一个写得不好的答案。