我们经常维护一些组件,组件起初很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如,组件常常在 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>;
}
翻译完毕!
如果有什么疑问或建议请在评论里面回复。
网友评论