React——useEffect和自定义useUpdateEffect

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49198.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

go语言day16 runtime包 临界资源 sync包

深入理解Java虚拟机到底是什么_java虚拟机是什么-CSDN博客 Golang-100-Days/Day16-20(Go语言基础进阶)/day17_Go语言并发Goroutine.md at master rubyhan1314/Golang-100-Days GitHub runtime 类似jvm,runtime包也提供了垃圾回收功能,不同的是runtime…

Sleuth(Micrometer) +ZipKin分布式链路追踪的解析以及使用

1、用另一种场景来类比Sleuth和Zipkin的作用 我们来设想一个快递公司的物流追踪系统。设你在网上购买了一本书,当你的订单提交后,后台系统会生成一个唯一的订单号,这个订单号就相当于Sleuth中的Trace ID。你的订单会经过几个主要的处理阶段&…

3.5 查找和排序算法

大纲 算法基础 常用的表示算法的方法 算法的复杂度 查找 顺序查找、二分查找 哈希查找 真题 排序 插入排序 希尔排序 简单选择排序 堆排序 冒泡排序 快速排序 归并排序 基数排序 排序算法总结

梯度提升回归树模型

梯度提升回归树(Gradient Boosting Regression Trees, GBRT)是一种集成学习方法,通过结合多个弱学习器(通常是决策树)的预测结果来提高整体模型的性能。GBRT特别擅长处理回归问题和分类问题,具有较高的预测…

黑马程序员2024最新SpringCloud微服务开发与实战 个人学习心得、踩坑、与bug记录Day4 重置版 全网最全最快

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ gitee https://gitee.com/Qiuner 🌹 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 😄 (^ ~ ^) 想看更多 那就点个关注吧 我会…

UniCAVE实现融合输出或多屏输出

介绍 CAVE沉浸式系统包含单主机多屏和多主机多屏两种系统架构。此文档主要介绍融合输出与单机多屏输出,这两种方式都属于单主机多屏。均以使用UniCAVE输出到前左右下为例。引用的Package为UniCAVE2019。 融合输出 实现原理 (猜测)是将多块…

2024春秋杯网络安全联赛夏季赛Crypto(AK)解题思路及用到的软件

2024春秋杯网络安全联赛夏季赛Crypto(AK) 2024春秋杯网络安全联赛夏季赛Crypto解题思路以及用到的软件 所有题用到的软件 1.vm(虚拟机kali)和Ubuntu,正常配置即可B站有很多。 2.Visual Studio Code(里面要配置python,crypto库和Sagemath数学软件系统S…

Mono.fromRunnable 和 Mono.zip 的详细解释和示例

Mono.fromRunnable Mono.fromRunnable 是一种创建 Mono 的方式,它接受一个 Runnable 作为参数。当 Mono 订阅者订阅时,Runnable 会被执行。Mono.fromRunnable 不会发出任何值,只会执行 Runnable 的逻辑,并在完成后发出一个完成信…

基于微信小程序+SpringBoot+Vue的青少年科普教学系统平台(带1w+文档)

基于微信小程序SpringBootVue的青少年科普教学系统平台(带1w文档) 基于微信小程序SpringBootVue的青少年科普教学系统平台(带1w文档) 这个工具就是解决上述问题的最好的解决方案。它不仅可以实时完成信息处理,还缩短高校教师成果信息管理流程,使其系统化…

LINUX之MMC子系统分析

目录 1. 概念1.1 MMC卡1.2 SD卡1.3 SDIO 2. 总线协议2.1 协议2.2 一般协议2.3 写数据2.4 读数据2.5 卡模式2.5.1 SD卡模式2.5.2 eMMC模式 2.6 命令2.6.1 命令类2.6.2 详细命令 2.7 应答2.8 寄存器2.8.1 OCR2.8.2 CID2.8.3 CSD2.8.4 RCA2.8.5 扩展CSD 3. 关键结构3.1 struct sdh…

数学建模(7)——Logistic模型

一、马尔萨斯人口模型 import numpy as np import matplotlib.pyplot as plt# 初始人口 N0 100 # 人口增长率 r 0.02 # 时间段(年) t np.linspace(0, 200, 200)# 马尔萨斯人口模型 N N0 * np.exp(r * t)# 绘图 plt.plot(t, N, labelPopulation) plt.…

6、基于Fabirc 2.X 通用电子存证系统部署

evidence 将GOPATH设置为/root/go,拉取项目: cd $GOPATH/src && git clone https://gitee.com/henan-minghua_0/evidence.git 在/etc/hosts中添加: 127.0.0.1 orderer.example.com 127.0.0.1 peer0.org1.example.com 127.0.0.1 peer1.org…

【数据结构】堆的实现以及建堆算法和堆排序

【数据结构】堆的实现以及建堆算法和堆排序 🔥个人主页:大白的编程日记 🔥专栏:数据结构 文章目录 【数据结构】堆的实现以及建堆算法和堆排序前言一.堆的实现1.1 堆数据的插入1.2堆数据的删除 二.建堆算法和堆排序2.1思路分析2.…

java的转义字符,注释和代码规范

目录 1.Java运行机制 Java开发快速入门 Java开发注意事项和细节说明 Java学习方法 2.Java的转义字符 Java常用的转义字符 代码示例: 转义字符练习 3.初学java易犯错误 4.注释(comment) 单行注释与多行注释 文档注释 5.Java代码规…

Spark轨迹大数据处理_scalaSpark代码实两个GIS点(经纬度点)之间的方位角计算

终于有时间来搞一搞这个专栏了 首先声明一下 1、我这个代码是基于一个简化方位角模型,忽略了地球的曲率,适用于距离相对较短的距离。因为业务相关,这个方位角两个点的距离计算不会超过1000km。 2、我这个方位角的计算逻辑:是从一…

使用Top进行设备性能分析思路

Top命令 像windows一样,linux也有一个“进程管理”,可以在命令行执行 top ,就可以整体的查看当前机器的资源及进程情况。 在性能问题中,Top是使用较多的一个命令,一般用它可以从整体上了解系统的CPU、内存、IO情况&am…

MongoDB教程(十七):MongoDB主键类型ObjectId

💝💝💝首先,欢迎各位来到我的博客,很高兴能够在这里和您见面!希望您在这里不仅可以有所收获,同时也能感受到一份轻松欢乐的氛围,祝你生活愉快! 文章目录 引言一、Object…

【状态机动态规划 状态压缩】1434. 每个人戴不同帽子的方案数

本文涉及知识点 位运算、状态压缩、枚举子集汇总 动态规划汇总 LeetCode 1434. 每个人戴不同帽子的方案数 总共有 n 个人和 40 种不同的帽子,帽子编号从 1 到 40 。 给你一个整数列表的列表 hats ,其中 hats[i] 是第 i 个人所有喜欢帽子的列表。 请你…

建投数据人力资源系列产品获得欧拉操作系统及华为鲲鹏技术认证书

近日,经欧拉生态创新中心和华为技术有限公司测评,建投数据自主研发的人力资源管理系统、招聘管理系统、绩效管理系统、培训管理系统,完成了基于欧拉操作系统openEuler 22.03、华为鲲鹏Kunpeng 920(Taisha 200)的兼容性…

ASP.NET MVC

ASP.NET MVC与.NET Framework关系 .NET Framework是一个庞大的代码库,能为多种编程语言提供支持(如C#、VB、F#等)。同时.NET Framework 提供了多种技术框架,ASP.NET MVC是.NET Framework提供的众多技术框架中的一种,用于开发Web应用。 .NET …