useEffect（副作用）通过一个参数来实现模拟class组件的componentDidMount、componentWillUnmount还有componentDidUpdate这几个生命周期函数
无阻塞更新：因为他是在组件挂载之后执行操作，比如请求数据，他是在组件挂载完了以后才执行数据请求，这样就算请求失败了，页面也能正常显示，不会报错；
同一个组件可以多次使用useEffect。

第一种：第二个参数不传值

相当于是监听页面的变化，只要页面有更新，都会执行。
注意：不能在这个函数体内执行页面更新操作，否则会陷入死循环

import React, { useEffect, useRef, useState, useReducer, useMemo } from 'react';
export default function HookDemo(props) {
    let [num, setNum] = useState(0);
    useEffect(() => {
        // 这个是监听的页面的变化，只要页面有state变化就会执行，不能在这个函数体内执行页面更新操作，否则会陷入死循环。
        // 类似class组件的componentDidUpdate
        console.log('页面监听');
    });
    return (
        <div style={{ padding: 30 }}>
            <div style={{ marginTop: 30 }}>
                {/* useEffect */}
                <h2>useEffect</h2>
                <h2>你点了我{num}次了</h2>
                <button onClick={() => setNum(num + 1)}>点击</button>
            </div>
        </div>
    );
}

第二种：第二个参数传[]

表示的是它不监听页面数据的变化，只有在页面初始化和销毁之前会执行；
执行的是类似于class组件的componentDidMount和componentWillUnmount两个生命周期;

    useEffect(() => {
        // 类似componentDidMount
        console.log('初始化一下');
        return () => {
            // 类似componentWillUnmount
            console.log('什么都不监听的时候return的函数');
        };
    }, []);

第三种：第二个参数传具体的值

监听第二个参数数组内所传的值，当对应的state有更新时触发。
注意：这里的执行顺序其实不是先执行上一次useEffect return的函数，而是先正常执行下一次状态更新然后再执行上一次的effct,然后再执行，下一次的effct。因为大多数情况下，effct不会阻塞页面的更新。

    useEffect(() => {
        // 这个的执行顺序是：先执行return里的函数，再执行外部函数体内的函数，return里获取到的num未更新num前的数据。
        console.log('监听num变化');
        console.log('函数体内获取的num', num);      // 函数体内获取的num 1
        return () => {
            console.log('监听num的时候return的函数');
            console.log('return获取的num', num);        // return获取的num 0
        };
    }, [num]);

effct其实是组件输出的一部分，单次渲染范围内，effct里的props和state是保持不变的。

effects会在每次渲染后运行，并且概念上它是组件输出的一部分，可以“看到”属于某次特定渲染的props和state。就是只要组件有更新，useEffect都是作为组件输出的一部分。
在单次渲染的范围内，props和state都保持不变。
这一点上，函数式组件和class组件是不一样的，因为class组件做了处理，this.state始终是指向最新的值，而不是属于某次特定渲染的值。

    const lateInputValue = useRef(inputVal);
    useEffect(() => {
        setTimeout(() => {
            console.log(`延时获取inputval的值：${inputVal}`);       
            // 延时获取inputval的值：2  延时获取inputval的值：23 延时获取inputval的值：234
        }, 3000);
        // 用ref可以打破这种单次独立渲染，因为ref始终指向的是最新的inpuval的值，所以在定时器范围内更改了inputval的值，那么ref获取到的就是最新的状态值。
        lateInputValue.current = inputVal;
        setTimeout(() => {
            console.log(`验证一下lateInputValue是几？ ${lateInputValue.current}`);      
            // 验证一下lateInputValue是几？  234 验证一下lateInputValue是几？ 234    验证一下lateInputValue是几？ 234
        }, 3000);
    }, [inputVal]);