当前位置: 首页 > article >正文

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

useEffect

  1. 参数
    • 第一个参数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 函数。
  2. 执行时机
    • React 在必要时会调用 setup 和 cleanup,这可能会发生多次:
      • 挂载阶段:将组件挂载到页面时,将运行 setup 代码。
      • 更新阶段:若 useEffect 提供了依赖项数组,当依赖项数组中的任何一个值发生变化时,useEffect 会先调用之前的清理函数(如果有的话),然后再调用新的副作用函数:
        • 首先,使用旧的 props 和 state 运行 cleanup 代码。
        • 然后,使用新的 props 和 state 运行 setup 代码。
      • 卸载阶段:当组件从页面卸载后,cleanup 代码 将运行最后一次。
  3. 注意事项
    • useEffect 是一个 Hook,因此只能在 组件的顶层 或自己的 Hook 中调用它,而不能在循环或者条件内部调用。如果需要,抽离出一个新组件并将 state 移入其中

示例

在这里插入图片描述

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;    

http://www.kler.cn/a/586511.html

相关文章:

  • 第三篇《RMAN 备份与恢复指南:保障数据库安全》(RMAN)
  • JAVA字符串与正则表达式
  • 策略模式(Strategy Pattern)与状态模式(State Pattern)的异同
  • ROS2基础——Linux
  • LeetCode热题100——技巧
  • 05 | 使用 Cobra 包来构建你的 Go 项目
  • pytorch训练权重转化为tensorflow模型的教训
  • Https SSL证书配置
  • 蓝桥杯 阶乘求值
  • 边缘计算与 PCDN 的融合:未来网络架构新趋势​
  • 关于ModbusTCP/RTU协议对接Ethernet/IP(CIP)协议的方案
  • 智能家居分享
  • AI 革命再提速:从 Manus 封停到 OpenAI 开源,技术竞赛与伦理博弈下的产业变局
  • 力扣 754 到达终点数字 思路讲解
  • 快速使用Python爬虫根据关键词获取衣联网商品列表:实战指南
  • 【教学类-43-26】20240312 数独4宫格的所有可能(图片版 576套样式,空1格-空8格,每套65534张*576小图=3千万张小图)
  • 亚马逊自养号测评,IP纯净度的重要性
  • 使用Composer实现自动加载类
  • 指令微调 (Instruction Tuning) 与 Prompt 工程
  • Spring @RequestMapping 注解详解