React中的Hooks----Effect Hook

本文是自己在学习react过程中整理的笔记，如果你觉得这篇文章对你有帮助，不妨点个赞、收藏、关注支持一下🌸~，感谢各位的支持！

示例

import React, {useEffect, useState} from 'react';
import {root} from '../../index'

function EffectHook(props) {
    let [count,setCount]=useState(0)
    let [name,setName]=useState('张三')

    function changeName(){
        setName(name => name='李四')
    }

    useEffect(() => {
        console.log('2222')
    }, [name,count]);

    useEffect(() => {
        let timer = setInterval(()=>{
            setCount(count=>count+1)
        },1000)

        return ()=>{
            clearTimeout(timer)
        }
    },[]);

    function unmount(){
        root.unmount()
    }

    return (
        <div>
            <h1>当前求和为：{count}（每个一秒+1)</h1>
            <h1>当前姓名为：{name}</h1>
            <button onClick={changeName}>点我改名</button>
            <button onClick={unmount}>卸载组件</button>
        </div>
    );
}

export default EffectHook;

说明

1、Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）

2、React中的副作用操作：

        ● 发ajax请求数据获取

        ● 设置订阅 / 启动定时器

3、语法和说明：useEffect(()=>{return ()=>{}},[stateValue])

        （1）第一个参数是回调函数()=>{}：

                ● 想使用类似生命周期componentWillUnmount() 钩子的功能，需要在该回调里面返回一个箭头函数，箭头函数里面写要执行的操作。

                ● 执行类似于生命周期componentDidMount()和componentDidUpdate()钩子的功能，不需要返回箭头函数。

       （2）第二个参数是要监测的数据，是个数组：

                ● 数组里面写哪个状态，表示那个状态被监测，只要状态的值发生变化，就会调用回调函数。

                ● 第二个参数不写，只有第一个参数时，表示监测页面所依赖的所有数据的变化，即除了页面初始挂载的时候调用一次回调函数之外，其他只要页面所依赖的数据发生变化，都会调用回调函数。（相当于componentDidUpdate()）

                ● 第二个参数传[ ]，表示不监测页面所依赖的任何数据的变化，只在页面初次挂载的时候执行一次第一个参数的回调函数。（相当于componentDidMount()）

4、可以把 useEffect Hook 看做如下三个函数的组合：

        ● componentDidMount()

        ● componentDidUpdate()

        ● componentWillUnmount()

5、通过使用Effect Hook，你可以告诉 React 组件需要在渲染后执行某些操作。 React 会保存你传递的函数，并且在执行 DOM 更新之后调用它。（类似于vue中的nextTick）