React useEffect：每个开发人员都应知道的4个技巧

Let’s talk about useEffects in React Hooks! I’m going to share with you 4 tips you should have in mind when using useEffect.

让我们来谈谈React Hooks中的useEffects！ 我将与您分享使用useEffect时应记住的4个技巧。

将useEffect用于一个目的 (Use a useEffect for a single purpose)

In React Hooks, you can have multiple useEffect functions. This is a great feature because, if we analyze how to write clean code, you’ll see that functions should serve a single purpose (much like how a sentence should communicate one idea only).

在React Hooks中，您可以具有多个useEffect函数。 这是一个很棒的功能，因为如果我们分析如何编写简洁的代码，您会看到函数应该达到一个单一的目的(就像一个句子仅传达一个想法一样)。

Splitting useEffects into short and sweet single-purpose functions also prevents unintended executions (when using the dependency array).

将useEffects拆分为简短而甜美的单用途函数也可以防止意外执行(使用依赖项数组时)。

For example, let’s say you have varA that is unrelated to varB, and you want to build a recursive counter based on useEffect (with setTimeout) so let’s write some bad code:

例如，假设您有一个与varB无关的varA ，并且想要基于useEffect(带有setTimeout)构建一个递归计数器，那么让我们编写一些错误的代码 ：

As you can see, a single change in any of the variables varA and varB will trigger an update in both variables. This is why this hook doesn’t work properly.

如您所见，任何变量varA和varB的单个更改都会触发两个变量的更新。 这就是为什么此挂钩无法正常工作的原因。

Since this is a short example, you may feel that it’s obvious, however, in longer functions with more code and variables I guarantee you will miss this. So do the right thing and split your useEffect.

由于这是一个简短的示例，因此您可能会觉得很明显，但是，在更长的函数中使用更多的代码和变量，我保证您会错过这一点。 因此，做正确的事并拆分您的useEffect。

In this case, it should become:

在这种情况下，它应变为：

尽可能使用自定义钩子 (Use custom hooks whenever you can)

Let’s take the example above again. What if the variables varA and varB are completely independent?

让我们再次以上面的示例为例。 如果变量varA和varB完全独立怎么办？

In this case, we can simply create a custom hook to isolate each variable. This way, you get to know exactly what each function is doing to which variable.

在这种情况下，我们可以简单地创建一个自定义钩子来隔离每个变量。 这样，您就可以确切地了解每个函数对哪个变量执行的操作。

Let’s build some custom hooks then!

然后让我们构建一些自定义钩子！

Now each variable has its’ own hook. Much more maintainable and easy to read!

现在，每个变量都有自己的钩子。 更易于维护且易于阅读！

以正确的方式有条件地运行useEffect (Conditionally run useEffect the right way)

On the topic of setTimeout, let’s take the following example:

关于setTimeout主题，让我们看下面的示例：

For some reason, you want to limit the counter to a maximum of 5. There’s the correct way and the incorrect way.

由于某种原因，您希望将计数器的最大值限制为5。这是正确的方法和错误的方法。

Let’s take a look at the incorrect way first:

首先让我们看一下错误的方式 ：

Although this works, bear in mind that clearTimeout will run on any change of varA, while setTimeout is conditionally run.

尽管此方法可行，但请记住，clearTimeout将在varA的任何更改上运行，而setTimeout有条件地运行。

The recommended way to run useEffect conditionally is to do a conditional return at the beginning of the function, like so:

建议有条件地运行useEffect的方法是在函数的开头进行有条件的返回，如下所示：

This is what you see Material UI using (as well as many others) and it makes sure you’re not running useEffect by mistake.

这就是您看到Material UI (以及其他许多UI)使用的内容，并且确保您没有错误地运行useEffect。

在依赖数组中键入useEffect内部的每个道具 (Type out every prop inside useEffect in the dependency array)

If you’re using ESLint, then you’ve probably seen a warning that comes from ESLint exhaustive-deps rule.

如果您使用的是ESLint，那么您可能已经看到来自ESLint 详尽穷举规则的警告。

This is crucial. When your app grows bigger and bigger, more dependencies (props) get added into each useEffect. To keep track of all of them and avoid stale closures, you should add each and every dependency into the dependency array.

这很关键。 当您的应用程序变得越来越大时，每个useEffect中都会添加更多的依赖项(属性)。 为了跟踪所有它们并避免过时的关闭，您应该将每个依赖添加到依赖数组中。

Again, on the topic of setTimeout, let’s say you want to run setTimeout only once and add on to varA, much like the previous examples.

再次，关于setTimeout主题，假设您只想运行一次setTimeout并添加到varA中，就像前面的示例一样。

You might be tempted to do the following incorrect example:

您可能会尝试执行以下不正确的示例 ：

Although this will do what you want, let’s take a moment to think, “what if your code gets bigger?”, or, “what if I want to change the code above to something else?”

尽管这将满足您的要求，但让我们花一点时间思考一下，“如果代码变大了会怎样？”或“如果我想将上面的代码更改为其他代码会怎样？”

In that case, you’ll want to have the variables all mapped out, as it will be much easier to test and detect problems that might arise (like stale props and closures).

在这种情况下，您将需要将所有变量都映射出来，因为它可以更轻松地测试和检测可能出现的问题(例如陈旧的道具和闭包)。

The correct way should be:

正确的方法应该是：

That’s it, folks. If you have any questions or suggestions, I’m all ears! Reply or comment below and I’ll be sure to check it out!

就是这样，伙计们。 如果您有任何疑问或建议，我无所不能！ 请在下面回复或评论，我一定会检查出来的！

翻译自: https://medium.com/swlh/useeffect-4-tips-every-developer-should-know-54b188b14d9c