精读《useEffect 完全指南》

1. 引言

工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。

Hooks API 无论从简洁程度，还是使用深度角度来看，都大大优于之前生命周期的 API，所以必须反复理解，反复实践，否则只能停留在表面原地踏步。

相比 useState 或者自定义 Hooks 而言，最有理解难度的是 useEffect 这个工具，希望借着 a-complete-guide-to-useeffect 一文，深入理解 useEffect。

原文非常长，所以概述是笔者精简后的。作者是 Dan Abramov，React 核心开发者。

2. 概述

unLearning，也就是学会忘记。你之前的学习经验会阻碍你进一步学习。

想要理解好 useEffect 就必须先深入理解 Function Component 的渲染机制，Function Component 与 Class Component 功能上的不同在上一期精读 精读《Function VS Class 组件》 已经介绍，而他们还存在思维上的不同：

Function Component 是更彻底的状态驱动抽象，甚至没有 Class Component 生命周期的概念，只有一个状态，而 React 负责同步到 DOM。 这是理解 Function Component 以及 useEffect 的关键，后面还会详细介绍。

由于原文非常非常的长，所以笔者精简下内容再重新整理一遍。原文非常长的另一个原因是采用了启发式思考与逐层递进的方式写作，笔者最大程度保留这个思维框架。

从几个疑问开始

假设读者有比较丰富的前端 & React 开发经验，并且写过一些 Hooks。那么你也许觉得 Function Component 很好用，但美中不足的是，总有一些疑惑萦绕在心中，比如：