Effect Hook 可以让你在函数组件中执行副作用操作(数据获取，设置订阅，手动更新组件都属于副作用)。
首先依然是 引入
import React, { useState, useEffect } from 'react';
使用：
useEffect(() => {
document.title = 'use effect hook'
})
你可以把 useEffect Hook 看作是 componentDidMount、componentDidUpdate、componentWillUnmount 三个函数的组合。
在React 组件中，有两种副作用操作：需要清除的 和 不需要清除的。
无需清除的 effect
发送网络请求，变更DOM，记录日志都是常见的无需清除的操作。
为什么在组件内部调用 useEffect？
将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量（或其他 props）。我们不需要特殊的 API 来读取它 —— 它已经保存在函数作用域中。Hook 使用了 JavaScript 的闭包机制，而不用在 JavaScript 已经提供了解决方案的情况下，还引入特定的 React API。
默认情况下，第一次渲染之后，和每次更新之后都会执行。React 保证了每次运行 effect 的同时，DOM 已经更新完毕。
需要清除的 effect
订阅外部数据源。这种清除是很重要的，可以防止引起内存泄漏。
如果你的 effect 返回一个函数，React 将会在执行清除操作是调用它。这就是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数(可以是命名函数也可以是箭头函数)。
React 会在组件卸载的时候执行清除操作。effect 在每次渲染的时候都会执行。这就是为什么 React 会在执行当前 effect 之前对上一个 effect 进行清除。
使用 Effect 的提示
使用多个 Effect 实现关注点分离
比如：订阅和取消订阅，开始定时器和取消定时器
你也可以使用多个 effect。这会将不相关逻辑分离到不同的 effect 中。Hook 允许我们按照代码的用途分离它们。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。
useEffect 默认会在调用一个新的 effect 之前对前一个 effect 进行清理。
通过跳过 Effect 进行性能优化
虽然每次渲染后都执行清理或者执行 effect 清除，减少了一些bug，但是也可能会导致性能问题。在class 组件中，通过在 componentDidUpdate 中对 prevProps 和 prevState 的比较逻辑解决。在 Effect 中，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可：
useEffect(() => {
document.title = `You click ${count} times`
}, [count]); // 仅在 count 更新时执行这个 effect
如果数组中有多个元素，即使只有一个元素发生变化，react 也会执行 effect。
对于有清除操作的 effect 同样适用。
如果你要使用此优化方式，请确保数组中包含了所有外部作用域中会随时间变化并且在 effect 中使用的变量，否则你的代码会引用到先前渲染中的旧变量。
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行。
要记住 effect 外部的函数使用了哪些 props 和 state 很难。这也是为什么 通常你会想要在 effect 内部 去声明它所需要的函数。 这样就能容易的看出那个 effect 依赖了组件作用域中的哪些值：
