2 Effect Hook

副作用：和外部有交互

1. 引用外部变量
2. 调用外部函数
3. 修改dom、全局变量
4. ajax
5. 计时器（依赖window.setTimeout）
6. 存储相关

纯函数：相同的输入一定会得到相同的输出
Effect Hook可以让你在函数组件中执行副作用操作

类组件中处理副作用

• 在componentDidMount/componentDidUpdate声明周期中（真实dom构建以前）

useEffect执行时机

• 初次渲染之后 didMount（真实dom构建以后）
• 渲染更新时 didUpdate
• 是异步的，在回调函数中拿到更新的state

存在清理函数

1. 首次执行： render → useEffect
2. 再次执行： render → 清理函数 → useEffect
3. 清理函数：组件更新、组件销毁时执行

组件更新

useEffect(() => {
   
    console.log('useEffect')
    return () => {
   
        console.log('clear Effect')
    }
})

import {
    useState, useEffect } from 'react'
export default function App(props) {
   
    const [count, setCount] = useState(() => {
   
        console.log(1); // 惰性初始化，只会打印一次
        return 1
    });
    useEffect(() => {
   
        // 持续递增
        console.log('useEffect')
        let timer = setInterval(() => {
    // 2. 每一次副作用都会重新初始化一个timer
            setCount(count + 1)
        }, 1000)
        return () => {
   
            clearInterval(timer) // 1.闭包 第二次运行时，先清理上一次的timer
            console.log('clear Effect')