我需要为每个属性更改创建不同的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的内容只依赖于一个道具，而您在钩子的条件下使用了更多的道具，那么您的性能将不会像预期的那样好。

在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中的丹·阿布拉莫夫的说法。2018 “使用钩子，我们不是根据生命周期方法名称而是根据代码所做的事情来分隔代码”

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