在函数组件主体内（React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性

useEffect Hook 的使用则是用于完成此类副作用操作。useEffect 接收一个包含命令式、且可能有副作用代码的函数

useEffect函数会在浏览器完成布局和绘制之后，下一次重新渲染之前执行，保证不会阻塞浏览器对屏幕的更新

useEffect(didUpdate);

使用：

import React, { useState, useEffect } from 'react';export default function Counter() {const [count, setCount] = useState(0);// useEffect 内的回调函数会在初次渲染后和更新完成后执行// 相当于 componentDidMount 和 componentDidUpdateuseEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>count now is {count}</p><button onClick={() => setCount(count + 1)}>+</button></div>);
}

 等价 class 示例，如下：

useEffect Hook 函数执行时机类似于 class 组件的 componentDidMount、componentDidUpdate 生命周期，不同的是传给 useEffect 的函数会在浏览器完成布局和绘制之后进行异步执行

import React from 'react';export default class Counter extends React.Component {constructor(props) {super(props);this.state = {count: 0,};}componentDidMount() {document.title = `You clicked ${this.state.count} times`;}componentDidUpdate() {document.title = `You clicked ${this.state.count} times`;}render() {return (<div><p>count now is {this.state.count}</p><button onClick={() => this.setState({ count: this.state.count + 1 })}>+</button></div>);}
}

清除 effect：

通常情况下，组件卸载时需要清除 effect 创建的副作用操作，useEffect Hook 函数可以返回一个清除函数，清除函数会在组件卸载前执行。组件在多次渲染中都会在执行下一个 effect 之前，执行该函数进行清除上一个 effect

清除函数的执行时机类似于 class 组件componentDidUnmount 生命周期，这的话使用 useEffect 函数可以将组件中互相关联的部分拆分成更小的函数，防止遗忘导致不必要的内存泄漏

import React, { useState, useEffect } from 'react';export default function Counter() {const [count, setCount] = useState(0);useEffect(() => {console.log('start an interval timer')const timer = setInterval(() => {setCount((count) => count + 1);}, 1000);// 返回一个清除函数，在组件卸载前和下一个effect执行前执行return () => {console.log('destroy effect');clearInterval(timer);};}, []);return (<div><p>count now is {count}</p><button onClick={() => setCount(count + 1)}>+</button></div>);
}

优化 effect 执行：

默认情况下，effect 会在每一次组件渲染完成后执行。useEffect 可以接收第二个参数，它是 effect 所依赖的值数组，这样就只有当数组值发生变化才会重新创建订阅。但需要注意的是：

• 确保数组中包含了所有外部作用域中会发生变化且在 effect 中使用的变量
• 传递一个空数组作为第二个参数可以使 effect 只会在初始渲染完成后执行一次

import React, { useState, useEffect } from 'react';export default function Counter() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]); // 仅在 count 更改时更新return (<div><p>count now is {count}</p><button onClick={() => setCount(count + 1)}>+</button></div>);
}