首页 > 其他分享 >React——useEffect和自定义useUpdateEffect

React——useEffect和自定义useUpdateEffect

时间:2024-07-25 17:26:26浏览次数:16  
标签:current isFirst 自定义 渲染 React 组件 useUpdateEffect useEffect

useEffect 是React的一个内置Hook,用于在组件渲染后执行副作用(例如数据获取、订阅或手动更改DOM)。它将在第一次渲染后和每次更新后都会执行。

useEffect(() => {
  // 这里的代码将在组件挂载和更新时执行。
}, [dependencies]); // dependencies数组控制effect的重新执行。

相比之下,useUpdateEffect 不是React内置的Hook,但这个名称通常被用于自定义Hook,其行为类似于 useEffect,但它不会在组件的首次渲染时执行,只会在依赖项更新时执行。这可以通过跟踪组件是否已经挂载来实现。以下是如何实现 useUpdateEffect 的一个简单示例:

import { useEffect, useRef } from 'react';

function useUpdateEffect(effect, dependencies) {
  const isInitialMount = useRef(true);

  useEffect(() => {
    if (isInitialMount.current) {
      isInitialMount.current = false;
    } else {
      return effect();
    }
  }, dependencies);
}

在这个自定义 useUpdateEffect 中,我们使用了 useRef 来追踪组件是否是首次渲染。在首次渲染时,我们不执行传入的 effect 函数,而是将 isInitialMount.current 设置为 false。当组件再次渲染且依赖项发生变化时,由于 isInitialMount.current 已经是 false,我们就执行 effect 函数。

使用 useUpdateEffect 的场景主要是当你想忽略首次渲染的副作用,只关心更新后的副作用时。这在处理像模态对话框关闭或表单值变化等需要响应但不希望初始化时触发的逻辑时非常有用。

实例

import { useEffect, useRef } from "react";

export function useIsFirstRender() {
  const isFirst = useRef(true);

  if (isFirst.current) {
    isFirst.current = false;
    return true;
  }

  return isFirst.current;
}

export function useUpdateEffect(callback, dependencies) {
  const isFirstRender = useIsFirstRender();

  useEffect(() => {
    if (!isFirstRender) {
      return callback();
    } else {
    }
  }, dependencies);
}

这里定义了两个自定义的React Hooks:useIsFirstRender 和 useUpdateEffect。

useIsFirstRender

useIsFirstRender 这个Hook的目的是用来检测组件是否处于首次渲染的状态。它使用 useRef 来创建一个可变的 isFirst 引用,该引用在整个组件的生命周期中保持不变。

  1. const isFirst = useRef(true);: 在初次渲染时,初始化 isFirst.current 为 true。
  2. 接下来有一个条件判断 if (isFirst.current) { … },如果当前是首次渲染(isFirst.current 为 true),则将其设置为 false 并返回 true。
  3. 在后续的渲染中,由于 isFirst.current 已经被设置为 false,useIsFirstRender 将会返回 false。

useUpdateEffect

useUpdateEffect 这个Hook类似于 useEffect,但它只在依赖项更新时触发回调,而不会在首次渲染时触发。

  1. const isFirstRender = useIsFirstRender();: 使用上面定义的useIsFirstRender Hook来检测是否是首次渲染。
    2.然后使用 useEffect 来注册一个副作用:
  • 在副作用函数内部,通过 if (!isFirstRender) { … } 判断来确保只有在非首次渲染时才执行传入的 callback 函数。
  • 如果是首次渲染(isFirstRender 是 true),则不执行任何操作。
  • dependencies 参数作为 useEffect 的依赖项数组传递。

这样一来,useUpdateEffect Hook就可以在组件更新时(即依赖项改变时)执行特定行为,而在组件的初始挂载时则不执行任何操作。这在需要避免首次渲染影响和仅希望对更新反应时特别有用。例如,在输入框值改变时进行表单验证,但不想在组件刚挂载时立即验证。

标签:current,isFirst,自定义,渲染,React,组件,useUpdateEffect,useEffect
From: https://blog.csdn.net/weixin_45705239/article/details/140608551

相关文章

  • element自定义日期范围
              <el-form-itemlabel="验收时间":label-width="formLabelWidths"prop="YS_TIME">            <el-date-pickerv-model="ruleFormEnter.YS_TIME"type="datetime"placeholder=&q......
  • el-select选项自定义日期选择器选项,选中自定义日期,回显具体的日期时间
    需求:指标时点选择具体的时间,即自定义日期选项时,可操作选择具体日期。若选择自定义日期,应回显具体日期,如“2024-07-25”效果图如下:  代码如下:因为此处v-for生成的面板,每个面板都有一个指标时点选项,所以每个指标时点的select对应的ref需要唯一,此处通过遍历的下标i加以区分。......
  • PixPro 全开源图床系统源码,非常强大的压缩率 自定义尺寸,支持多种格式
    PixPro全开源图床系统源码,非常强大的压缩率自定义尺寸,支持多种格式PixPro全开源图床系统源码,非常强大的压缩率自定义尺寸,支持多种格式一款专为个人需求设计的高效图床解决方案,集成了强大的图片压缩功能与优雅的前台后台管理界面。项目结构精简高效,提供自定义图片压缩率......
  • Asp.Net Core Serilog日志自定义Sink
    项目的日志框架使用了Serilog,现在有需求要将异常日志记录一份到数据库中。目前网上可以找到适配各个数据库的Sink。https://github.com/serilog/serilog/wiki/Provided-Sinks但是由于项目需要适配多个不同类型的数据库,故打算自定义一个DatabaseSink,使用SqlSugar进行数据库操作。......
  • 用于用 NotRequired 替换自定义 TypeAlias 的 Mypy 插件
    我想编写一个mypy插件,以便为NotRequired[Optional[T]]引入类型别名。(正如我在这个问题中发现的,不可能用普通的python编写这个类型别名,因为NotRequired在TypedDict定义之外不允许使用。)我的想法是定义一个通用Possibly类型,如......
  • 微信小程序-自定义导航栏
    参考文章:自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)|微信开放社区(qq.com)1.设置导航栏样式自定义"navigationStyle":"custom"可以选择在页面json文件设置,也可选择在app.json文件设置,我选择页面配置2.定义想要的导航栏样式.navCustom{position:......
  • 基于jQuery的用户自定义页面
    1.需求在最简单的场景里面,我们需要在用户自定义页面显示一些数据,和输入一些数据。如下源代码:<!--AWP_In_VariableName='"enable_cycle"'--><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit......
  • 【正在编辑中...】ENVI56扩展工具:添加自定义光谱指数——以NDWI和NDBSI为例
    本工具适用于ENVI5.6及以上版本(本人测试最低版本为5.6.3)。ENVI内置了上百种指数公式,但是大家在使用过程中肯定会有自定义指数的需求。在之前只能通过波段运算工具实现指数计算,现在可以通过本工具方便的添加自定义光谱指数,然后可以通过如下工具或API使用新指数:光谱指数工具:Too......
  • 【React】useState:状态更新规则详解
    文章目录一、基本用法二、直接修改状态vs使用`setState`更新状态三、对象状态的更新四、深层次对象的更新五、函数式更新六、优化性能的建议在React中,useState是一个非常重要的Hook,用于在函数组件中添加状态管理功能。正确理解和使用useState更新状态的规......
  • 【React】箭头函数:现代 JavaScript 的高效编程方式
    文章目录一、箭头函数的基本语法二、箭头函数的特性三、在React中的常见用法四、最佳实践在现代JavaScript中,箭头函数(ArrowFunctions)是一种简洁的函数表达方式,并且在React开发中非常常见。箭头函数不仅简化了函数的语法,还带来了与普通函数不同的行为特性。本......