该 Hook 接收一个包含命令式、且可能有副作用代码的函数。
在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、
记录日志以及执行其他包含副作用的操作都是不被允许的，
因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。
使用 useEffect 完成副作用操作。赋值给 useEffect 的函数会在组件渲染到屏幕之后执行。
你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
useEffect 做了什么？
通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作。
React 会保存你传递的函数（我们将它称之为 “effect”），
并且在执行 DOM 更新之后调用它。
在这个 effect 中，我们设置了 document 的 title 属性，
不过我们也可以执行数据获取或调用其他命令式的 API。
为什么在组件内部调用 useEffect？
将 useEffect 放在组件内部让我们可以在 effect 中
直接访问 count state 变量（或其他 props）。
我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。
Hook 使用了 JavaScript 的闭包机制，
而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。
useEffect 会在每次渲染后都执行吗？
是的，默认情况下，它在第一次渲染之后和每次更新之后都会执行。
你可能会更容易接受 effect 发生在“渲染之后”这种概念，
不用再去考虑“挂载”还是“更新”。
React 保证了每次运行 effect 的同时，DOM 都已经更新完毕
如果你熟悉 React class 的生命周期函数，
你可以把 useEffect Hook 看做 componentDidMount，
componentDidUpdate 和 componentWillUnmount 这三个函数的组合。