React useEffect组件渲染执行操作 组件生命周期 监视器 副作用

介绍

useEffect 是 React Hook 中非常重要的一个，它用于处理副作用（side effects）。副作用包括数据获取、订阅、手动修改 DOM 等等。在 React 函数组件中，useEffect 让你能够在组件渲染后执行某些操作，类似于类组件中的 componentDidMount, componentDidUpdate, 和 componentWillUnmount。

例子

import {useEffect} from "react";

function App() {

    useEffect(()=>{
    //组件渲染完成的回调函数

        const list=getList() //模拟请求获取数据
        console.log(list)

    },[])//[] 依赖项

    function getList(){ //模拟获取数据
        return [1,2,3,4,5]
    }

    return <div  className="box">

    </div>

}

空依赖数组 ([])

只在初始渲染时执行一次

useEffect(() => {
    // 这个副作用只会在组件挂载时执行一次
}, []);

有依赖的数组 [dep1, dep2, ...]

• 组件挂载时执行一次
• 当依赖项之一发生变化时，副作用函数会重新执行。
• 适用场景： 你希望在某些数据或状态变化时执行副作用，比如更新 UI 或发送网络请求等。

useEffect(() => {
    // 只有当依赖项改变时才会执行副作用函数
}, [dep1, dep2]);

没有依赖项（useEffect() 没有第二个参数）

组件初始渲染+组件更新时执行

适用场景： 如果副作用需要在每次渲染后执行，例如实时跟踪某些状态变化，或者清理某些动画、事件监听等。

useEffect(() => {
    // 副作用每次渲染时都会执行
});

清除副作用

清除副作用通常是指在组件卸载时或副作用重新执行之前进行清理操作。这是为了避免内存泄漏、重复执行或不必要的资源占用。

useEffect(() => {
    // 执行副作用


    // 返回清理函数
    return () => {
        // 清理副作用

    };
}, [/* 依赖项 */]);