React之useEffect简记

一.作用

useEffect Hook相当于componentDidMount，componentDidUpdate 和componentWillUnmount这三个react class的生命周期函数的组合。

componentDidMount：组件挂载；

componentDidUpdate：组件更新；

componentWillUnmount：组件将要摧毁；

二.用法

useEffect有两个参数，第一个参数是一个回调函数，第二个参数是一个数组，这个数组中的元素都是依赖，每当依赖发生改变，就会触发第一个函数的执行。

三.重要理解

1.第二个参数存放变量，当数组存放变量发生改变时，第一个参数，逻辑处理函数将会被执行；

2.第二个参数如果不传，会导致逻辑处理函数无限循环调用；

3.第二个参数如果传递为一个空数组，那么逻辑处理函数就只能执行一次，相当于componentDidMount（组件挂载）；

4.如果第二个参数不是空数组，那么在数组中的依赖变化的时候就会触发逻辑函数的调用，就像componentDidMount和componentDidUpdate组合的生命周期函数一样；

5.useEffect在组件被销毁去除之前也会调用逻辑执行函数，会消除副作用，类似componentWillUnmount生命周期函数；

    //依赖项中有值时
    //页面首次渲染和父组件给子组件传的属性值和子组件自身的值改变(依赖项改变才会打印)
    useEffect(() => {
        console.log('页面首次渲染和依赖项改变的时候才会打印');
    },[num,props.title])