react useEffect函数清除副作用函数执行时机

useEffect

参数
- 第一个参数setup ：处理 Effect 的函数。setup 函数选择性返回一个清理（cleanup ）函数。
  - 当组件被添加到 DOM 的时候，React 将运行 setup 函数。
  - 在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。
  - 在组件从 DOM 中移除后，React 将最后一次运行 cleanup 函数。
- 第二个参数可选 dependencies ：setup 代码中引用的所有响应式值的列表。
  - 响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。
  - 如果你的代码检查工具配置了 React，那么它将验证是否每个响应式值都被正确地指定为一个依赖项。依赖项列表的元素数量必须是固定的，并且必须像 $dep1, dep2, dep3$ 这样内联编写。
  - React 将使用 Object.is 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行 Effect 函数。
执行时机
- React 在必要时会调用 setup 和 cleanup ，这可能会发生多次：
  - 挂载阶段：将组件挂载到页面时，将运行 setup 代码。
  - 更新阶段 ：若 useEffect 提供了依赖项数组，当依赖项数组中的任何一个值发生变化时，useEffect 会先调用之前的清理函数（如果有的话），然后再调用新的副作用函数：
    - 首先，使用旧的 props 和 state 运行 cleanup 代码。
    - 然后，使用新的 props 和 state 运行 setup 代码。
  - 卸载阶段：当组件从页面卸载后，cleanup 代码将运行最后一次。
注意事项
- useEffect 是一个 Hook，因此只能在组件的顶层或自己的 Hook 中调用它，而不能在循环或者条件内部调用。如果需要，抽离出一个新组件并将 state 移入其中

示例

js 复制代码

import React, { useEffect, useState } from 'react';

const Example = () => {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log('副作用函数执行，当前 count 值为:', count);

        return () => {
            console.log('清理函数执行，上一次 count 值为:', count);
        };
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
};

export default Example;