React useEffect:每个开发都应该知道的4个技巧
我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。这也给测试带来了一定挑战。同时，这也是很多人将 React 与状态管理库结合使用的原因之一。但是，这往往会引入了很多抽象概念，需要你在不同的文件之间来回切换，使得复用变得更加困难。
为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
怎么才能把Effect Hook 用好呢？
我们来谈谈React Hooks中的useEffects，将与你分享4个有用的技巧。使用useEffect时应该记住这四个技巧。
翻译文章来源：Medium
原标题：React useEffect: 4 Tips Every Developer Should Know
翻译开始
将useEffect用于一个单一功能
在React Hooks，可以有多个useEffect函数。这是一个很棒的功能，如果我们分析如何编写简洁的代码，会发现函数应该提供一个单一功能（就像一个句子仅传达一个想法一样）。
将useEffect拆分为简短而甜美的单用途函数也可以防止意外执行（使用依赖数组时）。
例如：如果varB和varA没有关系，并且想根据useEffect构建一个递归计数器（有setTimeout）,那么编写一些错误的代码：
function App() {
const [varA, setVarA] = useState(0);
const [varB, setVarB] = useState(0);
// Don't do this!
useEffect(() => {
const timeoutA = setTimeout(() => setVarA(varA + 1), 1000);
const timeoutB = setTimeout(() => setVarB(varB + 2), 2000);
return () => {
clearTimeout(timeoutA);
clearTimeout(timeoutB);
};
}, [varA, varB]);
return (
<span>
Var A: {varA}, Var B: {varB}
</span>
);
}
如你所见，变量varB和varA任何一个更改都将触发两个变量的更新。这就是为什么hook无法正常工作的原因。
由于这只是一个简单的示例，也许会觉得这很简单，但是，在更长的函数中使用更多的代码和变量，我保存你会忽略这一点。因此，拆分useEffect才是最正确的做法。
这个示例，应该是下面这样：
function App() {
const [varA, setVarA] = useState(0);
const [varB, setVarB] = useState(0);
// Correct way
useEffect(() => {
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]);
useEffect(() => {
const timeout = setTimeout(() => setVarB(varB + 2), 2000);
return () => clearTimeout(timeout);
}, [varB]);
return (
<span>
Var A: {varA}, Var B: {varB}
</span>
);
}
️注意：这个代码仅用于示例目的，旨在帮助你轻松理解
useEffect的问题。通常，当变量依赖先前的状态时，建议的方法是改为使用setVarA(varA => varA + 1)代替。
尽量使用自定义的hooks
再次以上面的示例为例。如果变量varB和varA完全独立怎么办？
在这种情况下，可以简单地创建一个自定义钩子来隔离每个变量。这样，可以准确的了解哪个函数对哪个变量执行的操作。
接下来，我们来构建一些自定义hooks!
function App() {
const [varA, setVarA] = useVarA();
const [varB, setVarB] = useVarB();
return (
<span>
Var A: {varA}, Var B: {varB}
</span>
);
}
function useVarA() {
const [varA, setVarA] = useState(0);
useEffect(() => {
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]);
return [varA, setVarA];
}
function useVarB() {
const [varB, setVarB] = useState(0);
useEffect(() => {
const timeout = setTimeout(() => setVarB(varB + 2), 2000);
return () => clearTimeout(timeout);
}, [varB]);
return [varB, setVarB];
}
现在每个变量都有自己的hook.更易于维护和阅读！
正确的方式加条件地运行useEffect
看下面示例，关于setTimeout的主题：
function App() {
const [varA, setVarA] = useState(0);
useEffect(() => {
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]);
return <span>Var A: {varA}</span>;
}
由于某种原因，希望将计数器的最大值限制为5。给出一种正确的方法和一种错误的方法。
首先看错误的方式：
function App() {
const [varA, setVarA] = useState(0);
// Don't do this!
useEffect(() => {
let timeout;
if (varA < 5) {
timeout = setTimeout(() => setVarA(varA + 1), 1000);
}
return () => clearTimeout(timeout);
}, [varA]);
return <span>Var A: {varA}</span>;
}
尽管这可行，但请记住只要varA改变cleatTimeout就会运行，而setTimeout是在满足条件下运行的。
推荐方式：在有条件的情况下运行useEffect，在头部添加一个条件返回，如下：
function App() {
const [varA, setVarA] = useState(0);
useEffect(() => {
if (varA >= 5) return;
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]);
return <span>Var A: {varA}</span>;
}
使用Material UI能看到很多这种用法（以及许多其他UI框架），并且可以确保没有错误的运行useEffect。
在依赖数组中键入useEffect内部的每个prop
如果使用ESLint，可能会看到来自ESLint的警告exhaustive-deps rule。
这很关键。当你的应用程序变得越来越大，每个useEffect中都会添加更多的依赖项（props）。为了跟踪所有这些props并避免过时的关闭，应该将每个依赖项到依赖数组中。(Here’s the official take on this subject)
继续，上面的setTimeout,假设只想运行一次setTimeout并添加到var中，就像前面的示例一样。
你可能尝试下面错误的方式：
function App() {
const [varA, setVarA] = useState(0);
useEffect(() => {
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, []); // Avoid this: varA is not in the dependency array!
return <span>Var A: {varA}</span>;
}
尽管这个满足需求，但让我们再花点时间思考一下，“如果你的代码变得更大会怎么样？”，或者，“如果想将上面的代码进行更改怎么办？”
在这种情况下，需要将所有的变量都映射出来，因为可以更轻松地测试和检测可能出现的问题（之前的props和closures）。
正确的方式应该是：
function App() {
const [varA, setVarA] = useState(0);
useEffect(() => {
if (varA > 0) return;
const timeout = setTimeout(() => setVarA(varA + 1), 1000);
return () => clearTimeout(timeout);
}, [varA]); // Great, we have our dependency array correctly set
return <span>Var A: {varA}</span>;
}
翻译完毕！
如果有什么疑问或建议请在评论里面回复。
