本教程将探讨在react应用中如何优化对多个dom元素的引用管理。针对传统上使用多个useref和switch语句处理动态元素交互的低效问题，我们将介绍一种基于useref结合createref数组的解决方案，实现更简洁、可扩展且易于维护的ref管理与元素滚动逻辑。
在React开发中，我们经常需要直接操作DOM元素，例如滚动到特定位置、聚焦输入框或测量元素尺寸。React提供了useRef Hook来创建可变的Ref对象，使其能够持久地引用DOM节点或React组件实例。然而，当需要管理大量动态生成的、且需要单独交互的DOM元素时，传统的Ref管理方式可能会变得冗长且难以维护。
考虑以下场景：您有一个列表，需要根据某个索引值滚动到列表中的特定项。一种直观但效率不高的方法是为每个可能的列表项声明一个独立的useRef，并结合switch语句来根据索引触发相应的滚动操作。
const ref0 = useRef();
const ref1 = useRef();
const ref2 = useRef();
const ref3 = useRef();
const ref4 = useRef();
// ... 其他业务逻辑
switch(index) {
case 0:
ref0?.current?.scrollIntoView();
break;
case 1:
ref1?.current?.scrollIntoView();
break;
case 2:
ref2?.current?.scrollIntoView();
break;
case 3:
ref3?.current?.scrollIntoView();
break;
case 4:
ref4?.current?.scrollIntoView();
break;
default:
break;
}这种模式的缺点显而易见：
为了解决上述问题，我们可以利用useRef来存储一个Ref对象的数组。useRef Hook本身可以存储任何可变值，并且该值在组件的整个生命周期中保持不变。我们可以让useRef存储一个由createRef创建的Ref对象组成的数组，从而实现对多个动态元素的集中管理。
初始化Ref数组: 使用useRef创建一个Ref对象，其current属性将用来存储一个Ref数组。然后，通过Array.from结合map方法，为预期的每个元素动态生成一个createRef()实例，并赋值给refs.current。
import { createRef, useEffect, useRef } from 'react';
export default function Sample() {
const refs = useRef([]);
// 确保Ref数组在组件挂载时被初始化，并在元素数量变化时更新。
// 对于固定数量的元素，可以在初次渲染时一次性创建。
// 如果元素数量动态变化，则需要更精细的控制，例如在useEffect中根据依赖项更新refs.current。
// 这里的逻辑确保在组件渲染时，如果refs.current的长度不匹配，则重新初始化或填充Ref对象。
// `refs.current[i] || createRef()` 确保重用现有Ref，只为新增元素创建新Ref。
if (refs.current.length !== 10) { // 假设需要管理10个元素
refs.current = Array.from({ length: 10 }).map((_, i) => refs.current[i] || createRef());
}
// ...
}重要提示: createRef()每次调用都会返回一个新的Ref对象。因此，将refs.current = Array.from(...).map(() => createRef()); 直接放在组件函数体内会导致每次渲染都重新创建Ref对象，这通常不是我们期望的。上述示例中的if (refs.current.length !== 10) 结合 refs.current[i] || createRef() 是一种更健壮的模式，它会重用已存在的Ref对象，只为新增的元素创建新的Ref。
绑定Ref到元素: 在渲染列表时，通过map方法遍历数据，并将数组中对应的Ref绑定到每个DOM元素上。
return (
<>
{Array.from({ length: 10 }).map((ele, index) => (
<div ref={refs.current[index]} key={index} className='scrollElement'>
Item {index}
</div>
))}
</>
);访问和操作特定Ref: 任何需要操作DOM的逻辑（例如滚动、聚焦等）都可以在事件监听器、useEffect Hook的回调函数中执行。通过索引直接从refs.current数组中获取对应的Ref对象。
useEffect(() => {
const indexOfRefIWantToScroll = 5; // 假设我们要滚动到第5个元素
// 安全地访问Ref的current属性并执行DOM方法
refs.current[indexOfRefIWantToScroll]?.current?.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 滚动到元素的顶部
});
}, []); // 空依赖数组确保只在组件挂载时运行一次import React, { createRef, useEffect, useRef } from 'react';
export default function Sample() {
// useRef来存储Ref对象的数组
const refs = useRef([]);
const numberOfElements = 10; // 假设有10个元素需要管理Ref
// 确保Ref数组在组件挂载时被初始化，并在元素数量变化时更新
// 这里的逻辑确保在组件渲染时，如果refs.current的长度不匹配，则重新初始化或填充Ref对象。
// `refs.current[i] || createRef()` 确保重用现有Ref，只为新增元素创建新Ref。
if (refs.current.length !== numberOfElements) {
refs.current = Array.from({ length: numberOfElements }).map((_, i) => refs.current[i] || createRef());
}
// 在组件挂载后执行DOM操作
useEffect(() => {
const indexOfRefIWantToScroll = 5; // 假设我们要滚动到第6个元素（索引为5）
// 安全地访问Ref的current属性并执行DOM方法
if (refs.current[indexOfRefIWantToScroll] && refs.current[indexOfRefIWantToScroll].current) {
refs.current[indexOfRefIWantToScroll].current.scrollIntoView({
behavior: 'smooth', // 平滑滚动
block: 'start' // 滚动到元素的顶部
});
}
}, []); // 空依赖数组确保只在组件挂载时运行一次
return (
<div style={{ height: '400px', overflowY: 'scroll', border: '1px solid #ccc', padding: '10px' }}>
<h2>滚动示例</h2>
{Array.from({ length: numberOfElements }).map((_, index) => (
<div
ref={refs.current[index]} // 绑定对应的Ref
key={index}
className='scrollElement'
style={{
height: '80px',
lineHeight: '80px',
textAlign: 'center',
backgroundColor: index % 2 === 0 ? '#f0f0f0' : '#e0e0e0',
marginBottom: '8px',
borderRadius: '4px',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
}}
>
这是第 {index + 1} 个可滚动元素
</div>
))}
</div>
);
}useRef与createRef的区别:
Ref数组的生命周期: 当元素的数量是动态的或会发生变化时，需要更谨慎地管理refs.current数组的更新。例如，可以在useEffect中根据元素列表的依赖项来重新构建或更新refs.current，确保新元素有新的Ref，旧元素保留其Ref。
可选链操作符: 在访问Ref的current属性时，使用可选链操作符?.（如refs.current[index]?.current?.scrollIntoView()）是一个好习惯，可以防止在Ref尚未绑定到DOM元素时引发错误。
callback ref作为替代方案: 对于完全动态的列表，另一种常见且强大的模式是使用callback ref。它允许您在Ref被绑定或解除绑定时执行回调函数，从而更灵活地管理Ref数组。例如：
import React, { useCallback, useRef } from 'react';
export default function DynamicList() {
const itemRefs = useRef({}); // 使用对象存储Ref，键为id或index
// 当Ref被绑定或解除绑定时调用
const setItemRef = useCallback((element, index) => {
if (element) {
itemRefs.current[index] = element; // 绑定时存储元素
} else {
delete itemRefs.current[index]; // 解除绑定时移除
}
}, []); // 依赖项为空数组，确保callback ref函数只创建一次
// 假设items是一个动态数组
const items = Array.from({ length: 5 }).map((_, i) => ({ id: i, content: `动态项 ${i + 1}` }));
useEffect(() => {
// 假设需要滚动到第3项
const targetIndex以上就是React中高效管理与滚动多个Ref：告别冗余useRef与switch的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
402
收藏
