react18中在列表项中如何使用useRef来获取每项的dom对象

在react中获取dom节点都知道用ref,但是在一个列表循环中,这样做是行不通的,需要做进一步的数据处理。

实现效果

需求:点击每张图片,当前图片出现在可视区域。
请添加图片描述

代码实现

.box{border: 1px solid #000;list-style: none;padding: 0;font-size: 0;width: 600px;white-space: nowrap;overflow: hidden;
}
.box li{display: inline-block;padding: 10px;}
.active{border: #000 1px solid;
}
.img{width:80px;height:80px;display: block;
}
  • 核心代码
import { useEffect, useState, useRef } from "react";
import { flushSync } from "react-dom";
import "./compref.css";
function CompRef() {const [catLists, setCatLists] = useState([]);const [index, setIndex] = useState(0);const itemsRef = useRef(null);useEffect(async () => {const getData = await fetch("https://xxxxx");const data = await getData.json();const lists = data.map((item, index) => ({ id: index, url: item.url }));setCatLists(lists);}, []);function getMap() {if (!itemsRef.current) {// 首次运行时初始化 Map。itemsRef.current = new Map();}return itemsRef.current;}return (<><div>CompRef</div><ul className="box">{catLists.map((item, i) => (<likey={item.id}className={index === i && "active"}onClick={() => {setIndex(i);const map = getMap();const node = map.get(index);node.scrollIntoView({behavior: "smooth",block: "nearest",inline: "center",});}}ref={(node) => {const map = getMap();if (node) {map.set(item.id, node);} else {map.delete(item.id);}}}><img className="img" src={item.url} alt="" /></li>))}</ul></>);
}
export default CompRef;

思维扩展

需求:点击下一张按钮,图片出现在可视区域。

  • 实现效果
    请添加图片描述
  • 代码实现
import { useEffect, useState, useRef } from "react";
import { flushSync } from "react-dom";
import "./compref.css";
function CompRef() {const [catLists, setCatLists] = useState([]);const [index, setIndex] = useState(0);const itemsRef = useRef(null);useEffect(async () => {const getData = await fetch("https://xxxxxxxxxxxxxxxxxxx");const data = await getData.json();const lists = data.map((item, index) => ({ id: index, url: item.url }));console.log("🚀 ~ useEffect ~ data:", lists);setCatLists(lists);}, []);function getMap() {if (!itemsRef.current) {// 首次运行时初始化 Map。itemsRef.current = new Map();}return itemsRef.current;}return (<><div>CompRef</div><buttononClick={() => {setIndex(index);if (index < catLists.length - 1) setIndex(index + 1);else setIndex(0);const map = getMap();const node = map.get(index);console.log("🚀 ~ CompRef ~ node:", node);node.scrollIntoView({behavior: "smooth",block: "nearest",inline: "center",});}}>click</button><ul className="box">{catLists.map((item, i) => (<likey={item.id}className={index === i && "active"}ref={(node) => {const map = getMap();if (node) {map.set(item.id, node);} else {map.delete(item.id);}}}><img className="img" src={item.url} alt="" /></li>))}</ul></>);
}
export default CompRef;

可以看出上面的确实现了效果,但是有个小Bug,大家可以去测试下,自己排查优化下。


修复代码

import { useEffect, useState, useRef } from "react";
import { flushSync } from "react-dom";
import "./compref.css";
function CompRef() {const [catLists, setCatLists] = useState([]);const [index, setIndex] = useState(0);const itemsRef = useRef(null);const nowIndex = useRef(0);useEffect(async () => {const getData = await fetch("https://xxxxxxxxxxxxxxxxxxxxxxx");const data = await getData.json();const lists = data.map((item, index) => ({ id: index, url: item.url }));console.log("🚀 ~ useEffect ~ data:", lists);setCatLists(lists);}, []);function getMap() {if (!itemsRef.current) {// 首次运行时初始化 Map。itemsRef.current = new Map();}return itemsRef.current;}function handleClick() {flushSync(() => {if (index < catLists.length - 1) {setIndex((index) => index + 1);nowIndex.current = index + 1;} else {setIndex(0);nowIndex.current = 0;}console.log(index);console.log("🚀 ~ CompRef ~ nowIndex:", nowIndex);});const map = getMap();const node = map.get(nowIndex.current);node.scrollIntoView({behavior: "smooth",block: "nearest",inline: "center",});}return (<><div>CompRef</div><button onClick={handleClick}>click</button><ul className="box">{catLists.map((item, i) => (<likey={item.id}className={index === i && "active"}ref={(node) => {const map = getMap();if (node) {map.set(item.id, node);} else {map.delete(item.id);}}}><img className="img" src={item.url} alt="" /></li>))}</ul></>);
}
export default CompRef;
  • 实现效果请添加图片描述
    这样,就不会延迟显示一张图片了

总结

react17中

1、在react可调度范围内的setState是异步的,并且多次setState会合并只执行最后一次,进行批量更新。

  • react合成事件
  • 生命周期
  • 事件处理,如onClickonChange等。

2、在react可调度范围外的setState是同步的。

  • 宏任务 setTimeoutsetInterval
  • 微任务 .then
  • 原生 js 绑定事件 document.addEventListener()

3、setState 并非真正的异步,而是通过设置全局变量 isBatchingUpdates 来判断 setState是先存进队列还是直接更新,如果值为true,则执行异步操作,如果为false,则直接更新。
isBatchingUpdates 会在 React 可以控制的地方,则为true,比如React生命周期和合成事件中,而在外部 react 无法控制的地方,比如原生事件,具体就是在 addEventListenersetTimeoutsetInterval.then等事件中,就只能同步。

react18

React18版本引入了自动批处理功能,批处理是指,当 React 在一个单独的渲染事件中批量处理多个状态更新以此实现优化性能。如果没有自动批处理的话,我们仅能够在 React 事件处理程序中批量更新。在 React 18 之前,默认情况下 promise、setTimeout、原生应用的事件处理程序以及任何其他事件中的更新都不会被批量处理;但现在,这些更新内容都会被自动批处理。

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

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

相关文章

微前端架构新选择:micro-app 框架一文全解析

目录 前言技术方案沙箱withiframe 环境变量主应用生命周期子应用生命周期初始化更新卸载缓存 JS 沙箱样式隔离元素隔离路由系统⭐数据通信⭐资源系统预加载umd 模式其他功能调试工具 前言 https://micro-zoe.github.io/micro-app/ micro-app 是由京东前端团队推出的一款微前端…

基于springboot美食商城推荐系统

基于springboot美食商城推荐系统 开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;idea 源码获取&#xff1a;https://downlo…

iOS调试真机出现的 “__llvm_profile_initialize“ 错误

一、错误形式&#xff1a; app启动就崩溃&#xff0c;如下&#xff1a; Demo__llvm_profile_initialize:0x1045f7ab0 <0>: stp x20, x19, [sp, #-0x20]!0x1045f7ab4 <4>: stp x29, x30, [sp, #0x10]0x1045f7ab8 <8>: add x29, sp, #0x100x1…

java写一个MD5加密工具

下面是一个简单的 Java MD5 加密工具的实现。这个工具可以用于对输入的字符串进行 MD5 加密&#xff0c;并返回加密后的结果。 MD5 加密工具类 import java.security.MessageDigest; import java.security.NoSuchAlgorithmException;public class MD5Util {/*** 使用 MD5 算法加…

SELinux中的安全标记与强制访问控制

SELinux的安全标记和强制访问控制是如何实现的&#xff1f; SELinux&#xff08;Security Enhanced Linux&#xff09;是一个由美国国家安全局&#xff08;NSA&#xff09;开发的Linux内核模块&#xff0c;它实现了强制访问控制&#xff08;MAC&#xff09;。SELinux通过为系统…

工伤认定流程和赔付标准

一、应当认定为工伤的规定 《工伤保险条例》第十四条规定&#xff1a;职工有下列情形之一的&#xff0c;应当认定为工伤&#xff1a; 1、在工作时间和工作场所内&#xff0c;因工作原因收到事故伤害的&#xff1b; 2、工作时间前后在工作场所内&#xff0c;从事与工作有关的预…

第10节 arkTS GridRow

在 ArkTS 中&#xff0c; GridRow 是 Grid 布局系统中的一个重要组成部分&#xff0c;用于定义网格布局中的行。以下是关于 GridRow 的详细介绍&#xff1a; 基本概念 Grid 布局将容器划分为行和列的网格结构&#xff0c; GridRow 则负责确定每行的属性和布局方式。…

物联网平台是什么?

在数字化时代&#xff0c;物联网&#xff08;Internet of Things&#xff0c;简称IoT&#xff09;已经成为推动社会进步和产业升级的重要力量。物联网平台&#xff0c;作为连接物理世界与数字世界的桥梁&#xff0c;正逐渐成为智能设备、数据和服务的中心枢纽。本文将带你深入了…

Mochi 1视频生成模型亮相:动作流畅,开放源代码

前沿科技速递&#x1f680; 近日&#xff0c;AI公司Genmo发布了最新的开源视频生成模型Mochi 1。Mochi 1在动作质量和提示词遵循能力方面有显著提升&#xff0c;并且与市面上许多闭源商业模型相媲美。作为一款支持个人和商业用途的开源工具&#xff0c;Mochi 1不仅展示了开源技…

UEFI EDK2框架学习 (四)——UEFI图形化

一、修改protocol.c #include <Uefi.h> #include <Library/UefiLib.h> #include <Library/UefiBootServicesTableLib.h> #include <stdio.h>EFI_STATUS EFIAPI UefiMain(IN EFI_HANDLE ImageHandle,IN EFI_SYSTEM_TABLE *SystemTable ) {EFI_STATUS S…

使用 EasyExcel 相邻数据相同时行和列的合并,包括动态表头、数据

前言 在处理 Excel 文件时&#xff0c;经常会遇到需要对表格中的某些单元格进行合并的情况&#xff0c;例如合并相同的行或列。Apache POI 是一个强大的工具&#xff0c;但它使用起来相对复杂。相比之下&#xff0c;EasyExcel 是一个基于 Apache POI 的轻量级 Excel 处理库&am…

软考中级网络工程师,快背,都是精华知识点!

一、上午常考概念 计算机硬件基础&#xff1a;根据考纲分析&#xff0c;本章主要考查三个模块&#xff1a;计算机体系结构、存储系统、I/O输入输出系统&#xff0c;其中每一模块又分若干知识点。“计算机硬件基础”相当于软考中的“公共基础课”&#xff0c;不同方向、不同级别…

初始JavaEE篇——多线程(2):join的用法、线程安全问题

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a;JavaEE 目录 模拟实现线程中断 join的用法 线程的状态 NEW&#xff1a; RUNNABLE&#xff1a; TIMED_WAITING&#xff1a; TERMINATED…

系统架构图设计(轻量级架构)

轻量级架构一般包括&#xff1a;表现层、业务逻辑层、持久层、数据库层 表现层架构 MVC 模型&#xff08;Model&#xff09;&#xff1a;应用程序的主体部分&#xff0c;表示业务数据和业务逻辑视图&#xff08;View&#xff09;&#xff1a;用户看到并与之交流的界面控制器&…

ESP32 S3 怎么开发基于ESP-RTC的音视频实时交互的应用,用语AI陪伴的领域

在ESP32-S3平台上开发基于ESP-RTC的音视频实时交互应用&#xff0c;尤其是在AI陪伴领域&#xff0c;涉及到音视频数据的采集、编码、传输和解码。ESP32-S3 具备较强的处理能力&#xff0c;且拥有丰富的接口和模块支持&#xff0c;可以用来实现这种功能。以下是一个完整的开发方…

【操作系统】Linux之进程管理二

第1关&#xff1a;进程等待 if(wait(&status) ! -1) { if(WIFEXITED(status)) status WEXITSTATUS(status); else status -1; } else { status -1; } 第2关&#xff1a;进程创建操作-exec函数族 void execlProcess() { pid_t pid vfork(); if(pid -1) { printf("…

Lim测试平台,五步完成批量生成数据

一、前言 在日常的测试工作中&#xff0c;我们常常需要生成大量的数据&#xff0c;例如为了测试分页功能、进行性能压力测试或准备测试所需的数据集。 虽然可以通过编写脚本或者使用如JMeter这样的工具来完成这些任务&#xff0c;但在团队合作的情境下&#xff0c;这种方法存…

打造通往自由的交易系统与策略——《以交易为生》读后感

我们知道要顺势而为&#xff0c;可什么是“势”&#xff1f;交易市场就像一片汪洋大海&#xff0c;潮起潮落的背后&#xff0c;有一套可以捕捉趋势的规律。要想看到势&#xff0c;就像软件工程中的可观测性&#xff0c;要找到合适的工具和指标&#xff0c;才能发现市场中重要的…

【云从】十、常见安全问题与云计算的计费模式

文章目录 1、常见安全问题1.1 DDoS攻击1.2 病毒攻击1.3 木马攻击1.4 代码自身漏洞 2、安全体系3、云计算的计费模式4、常见云产品的计费方案5、云产品计费案例 1、常见安全问题 1.1 DDoS攻击 通过分布在各地的大量终端&#xff0c;同时向目标发送恶意报包&#xff0c;以占满目…

微信小程序版本更新管理——实现自动更新

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…