useEffect 速查表
我刚开始学习 ReactJS 的时候，真的很享受最初的几个步骤，比如组件、props 以及 React 的许多其他有趣之处。其中一个特性是useEffect……；它很有趣，但对我来说也很复杂，我当时学得很吃力。
现在我想在这份简短的速查表中分享我的思维模型，以帮助你useEffect更好地学习或拥有更好的思维模型。
哲学
useEffect不是生命周期钩子。它是一种将副作用（例如fetch，`returns`、setTimeout`returns`、`returns` 等）与应用程序状态同步的机制。EpicReact.dev
主要目标不是useEffect用于组件生命周期，而是用于在状态改变（重新渲染）时执行某些操作。
useEffect(() => {
// A: run whenever the deps changes
return {
// B: Optional, runs before 1, we call this the clean-up function
}
}, deps); // deps is Optional too
useEffect运行步骤：
- 1：运行 A
- 2：等待新的状态变化（组件重新渲染）
- 3：如果
deps改变- 运行 B 以清除上次渲染的副作用
- 前往 2
依赖关系
- 无依赖：副作用函数 (A) 将在每次状态改变（重新渲染）时运行。
useEffect(() => {
// I depend on everything, I'll run on every re-render
});
- 空数组：由于没有对象监听其变化，因此副作用函数只会在状态初始化（首次渲染）时运行一次。
useEffect(() => {
// I depend on nothing, I'll run just one time
}, []);
- 非空数组：副作用函数会在每次依赖项更改时运行（至少更改其中一个依赖项）。
useEffect(() => {
// I depend on state1, state2 and prop1
// I'll run on every change of these dependencies
}, [state1, state2, prop1]);
每次渲染都有其独特的效果
我非常喜欢“每个渲染都有其自身的效果”这个标题；我认为几乎所有钩子函数都依赖于这个标题。我们需要注意的是，每个渲染都有其自身的函数体和值。副作用函数也是如此；请查看此处。
useEffect(() => {
console.log(count)
}, [count]);
我们来模拟一些状态变化，看看副作用函数会发生什么。
// in the first render, `count` is 0
// The side-effect function is going to be like this
() => {
console.log(0)
}
// assume we change `count` to 1 (setCount(1)), next render is like that
() => {
console.log(1)
}
// and so on...
这就是useEffect解决依赖关系的方法。
- GitHub 上的PDF 文件
希望这篇速查表对您有所帮助。别忘了分享并留言告诉我您对文章的看法。如果您想告诉我什么，请在Twitter上留言或在其他任何地方提及我。您还可以订阅我的邮件列表并在GitHub上关注我。
文章来源：https://dev.to/aslemammad/the-useeffect-cheatsheet-4e9i