React内置Hook函数-UseEffect

useEffect

概念：useEffect是一个React Hook函数，用于在React组件中创建不是由事件引起而是由渲染本身引起的操作(也就是没有任何用户事件触发)，比如发送Ajax请求，更改Dom等

useEffect基础使用

语法：useEffect(() => {}, [])
参数1是一个函数，可以把它叫做副作用函数，在函数内部可以放置要执行的操作
参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数只会在组件渲染完毕之后执行一次

import {useEffect} from "react";

function App() {
    useEffect(() => {
        // 页面挂载后执行，并且只执行一次
        console.log('App组件挂载了')
    },[])
    return (
        <div>
            <div>useEffect</div>
        </div>
    );
}

useEffect依赖项参数说明

useEffect副作用函数的执行时机存在多种情况，根据传入依赖项的不同，会有不同的执行表现

依赖项	副作用函数执行实际	备注
没有依赖项	组件初渲染 + 组件更新时执行
空数组依赖	只在初始渲染时执行一次
添加特定依赖项	组件初始渲染 + 特定依赖项变化时执行

import {useEffect, useState} from "react";

function App() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState('macy')
    useEffect(() => {
        // 1. 没有依赖项，初始渲染+组件更新时调用
        console.log('调用副作用函数：没有依赖项')
    })
    useEffect(() => {
        // 2. 空数组依赖项，初始渲染时调用
        console.log('调用副作用函数：空数组')
    },[])
    useEffect(() => {
        // 3. 传入特定依赖项，初始渲染+依赖项变化时时调用
        console.log('调用副作用函数：传入特定依赖项')
    },[name])
    return (
        <div>
            <div>
                App组件：
                <button onClick={() => setCount(count + 1)}>点击：{count}</button>
                <button onClick={() => setName(name + 1)}>点击：{name}</button>
            </div>
        </div>
    );
}

useEffect清除副作用

在useEffect中编写的由渲染本身引起的对接组件外面的操作，社区也经常把它叫做副作用操作，比如在useEffect中开启了一个定时器，我们想在
组件卸载时把这个定时器清理掉，这个过程就是清理副作用。
语法：
    useEffect(() => { 
        // 实现副作用的操作逻辑
        return () => {
            // 清除副作用逻辑
        } 
    }, [])
说明：清除副作用的函数最常见的执行时机是在组件卸载时自动执行

import {useEffect, useState} from "react";

function CompA () {
    useEffect(() => {
        // 组件挂载后调用(副作用操作)
        const timer = setInterval(() => {
            console.log('----定时器执行了----')
        }, 1000)
        // 组件卸载前调用（清理副作用操作）
        return () => {
            clearInterval(timer)
        }
    }, [])
    return <div>这是子组件</div>
}

function App() {
    const [show, setShow] = useState(true)
    return (
        <div>
            {show && <CompA/>}
            <button onClick={() => setShow(false)}>卸载子组件</button>
        </div>
    );
}