Question

我有3个道具存储，当其中任何一个更改时，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优于通常的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 与生命周期方法进行比较，而应根据我们在应用程序中的需要使用它。

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

2 个答案: