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

Question

我有三个道具在商店里，当其中任何一个发生变化时，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。

Answer 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]);

Answer 2

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

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