useEffect
useEffect 用来执行副作用操作，副作用可以理解为对环境做出影响的操作，比如数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用；
可以把 useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
在每次 render 完毕后根据依赖确定是否执行。
useEffect(() => {
// deps 依赖发生改变后执行
}, deps);
用途
作为 componentDidMount 使用
useEffect(() => {
console.log('我执行了')
// 每次初始化组件时执行一次，之后不会执行
}, []);
作为 componentDidUpdate 使用
useEffect(() => {
console.log('n 变化了')
// 每次 n 发生改变都会执行一次
}, [n]);
如果不传入依赖
useEffect(() => {
console.log('我执行了')
// 组件内每个状态改变都会执行
});
作为 componentWillUnmount 使用
useEffect(() => {
return () => {
console.log('我执行了')
// 每次组件将要卸载时执行
}
},[]);
如果同时存在多个 useEffect，会按照出现的顺序依次执行
useLayoutEffect
会先于 useEffect 执行，在 DOM 变更之后，浏览器绘制页面之前执行，所以会阻塞初始数据的渲染，不会产生视觉上的更新。
// div 内部 n 初始值为 0，刷新后
// n => 0 => 1000
useEffect(() => {
document.querySelector('div').innerText = 1000
}, [n])
// n => 1000
useLayoutEffect(() => {
document.querySelector('div').innerText = 1000
}, [n])
执行顺序
App() => 执行 => 产生 VDOM =>
DOM(div.innerText = 0; div.innerText = 1000) =>
(useLayoutEffect) => 改变样式内容(render 完毕) => (useEffect)
为了用户体验，不阻塞试图更新，降低延迟，优先使用 useEffect (优先渲染)
