浅谈hooksQuestion: 如何用useEffect模拟componentDidMount生命周期？虽然可以使用

“忘记你已经学到的。” — Yoda，

当我们不再透过熟悉的class生命周期方法去窥视useEffect 这个Hook的时候，我们才得以融会贯通。

Question: 如何用`useEffect`模拟`componentDidMount`生命周期？

虽然可以使用useEffect(fn, [])，但它们并不完全相等。和componentDidMount不一样，useEffect会捕获 props和state。所以即便在回调函数里，你拿到的还是初始的props和state。
如果你想得到“最新”的值，你可以使用ref。记住，effects的心智模型和componentDidMount以及其他生命周期是不同的，试图找到它们之间完全一致的表达反而更容易使你混淆。想要更有效，
你需要“think in effects”，它的心智模型更接近于实现状态同步，而不是响应生命周期事件

每一次渲染都有它自己的 Props and State

在我们讨论effects之前，我们需要先讨论一下渲染（rendering）。我们来看一个计数器组件Counter：

在这里，count 会“监听”状态的变化并自动更新吗？在这里count仅仅是一个数字，他没有data binding/watcher/proxy.
实际上：当我们更新状态的时候，React会重新渲染组件。每一次渲染都能拿到独立的count 状态，这个状态值是函数中的一个常量。

它仅仅只是在渲染输出中插入了count这个数字。这个数字由React提供。当setCount的时候，React会带着一个不同的count值再次调用组件。然后，React会更新DOM以保持和渲染输出一致。

像这样：

关键：任意一次渲染中的count常量都不会随着时间改变。渲染输出会变是因为我们的组件被一次次调用，而每一次调用引起的渲染中，它包含的count值独立于其他渲染。

每一次渲染都有它自己的事件处理函数

Gif: overreacted.io/46c55d5f1f7…

按照如下步骤：

点击增加counter到3
点击一下 “Show alert”
点击增加 counter到5并且在定时器回调触发前完成

Question: 此时alert会弹出什么？？？

解析：我们的组件函数每次渲染都会被调用，但是每一次调用中count值都是常量，并且它被赋予了当前渲染中的状态值。

其实就和普通函数多次调用函数类似：只不过多次调用函数在count改变时React已经帮你完成了

结论：在任意一次渲染中，每一次渲染都有它自己的 Props and State 且始终保持不变的 。如果props和state在不同的渲染中是相互独立的，那么使用到它们的任何值也是独立的（包括事件处理函数）。

它们都“属于”一次特定的渲染。即便是事件处理中的异步函数调用“看到”的也是这次渲染中的count值。

每次渲染都有它自己的Effects

useEffect 和事件函数很相似，并不是count的值在“不变”的effect中发生了改变，而是effect 函数本身在每一次渲染中都不相同 。React会记住你提供的effect函数，并且会在每次更改作用于DOM并让浏览器绘制屏幕后去调用它。

所以，你可以想象effects是渲染结果的一部分

类似于React,组件，浏览器三者通信的模式：

React: 给我状态为 0时候的UI。
你的组件:
- 给你需要渲染的内容: <p>You clicked 0 times</p>。
- 记得在渲染完了之后调用这个effect: () => { document.title = 'You clicked 0 times' }。
React: 没问题。开始更新UI，喂浏览器，我要给DOM添加一些东西。
浏览器: 酷，我已经把它绘制到屏幕上了。
React: 好的，我现在开始运行给我的effect
- 运行 () => { document.title = 'You clicked 0 times' }。