React高效管理多个Ref：简化滚动与useRef使用

学习文章要努力，但是不要急！今天的这篇文章《React高效管理多个Ref：简化滚动与useRef使用》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

本教程将探讨在React应用中如何优化对多个DOM元素的引用管理。针对传统上使用多个useRef和switch语句处理动态元素交互的低效问题，我们将介绍一种基于useRef结合createRef数组的解决方案，实现更简洁、可扩展且易于维护的Ref管理与元素滚动逻辑。

在React开发中，我们经常需要直接操作DOM元素，例如滚动到特定位置、聚焦输入框或测量元素尺寸。React提供了useRef Hook来创建可变的Ref对象，使其能够持久地引用DOM节点或React组件实例。然而，当需要管理大量动态生成的、且需要单独交互的DOM元素时，传统的Ref管理方式可能会变得冗长且难以维护。

冗余的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;
}

这种模式的缺点显而易见：

1. 代码冗余: 随着元素数量的增加，需要声明的useRef变量和switch语句中的case分支也会线性增加，导致代码量膨胀。
2. 可维护性差: 修改或添加元素时，需要同时修改Ref声明和switch逻辑，容易出错。
3. 扩展性差: 如果列表项是动态生成的，且数量不固定，这种硬编码的方式将无法适应。

优化方案：使用Ref数组进行动态管理

为了解决上述问题，我们可以利用useRef来存储一个Ref对象的数组。useRef Hook本身可以存储任何可变值，并且该值在组件的整个生命周期中保持不变。我们可以让useRef存储一个由createRef创建的Ref对象组成的数组，从而实现对多个动态元素的集中管理。

实现步骤

1. 初始化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。

2. 绑定Ref到元素: 在渲染列表时，通过map方法遍历数据，并将数组中对应的Ref绑定到每个DOM元素上。

   return (
       <>
           {Array.from({ length: 10 }).map((ele, index) => (
               <div ref={refs.current[index]} key={index} className='scrollElement'>
                   Item {index}
               </div>
           ))}
       </>
   );

3. 访问和操作特定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>
    );
}

注意事项

1. useRef与createRef的区别:

   • useRef：在函数组件中用于创建Ref对象。它返回一个在组件整个生命周期内保持不变的Ref对象。其current属性是可变的，可以用来存储任何值（包括DOM节点、React组件实例或由createRef创建的Ref对象数组）。
   • createRef：在类组件中创建Ref对象，但在函数组件中也可以独立使用。每次调用createRef()都会返回一个新的Ref对象。在上述方案中，我们利用它为数组中的每个元素生成一个独立的Ref实例。

2. Ref数组的生命周期: 当元素的数量是动态的或会发生变化时，需要更谨慎地管理refs.current数组的更新。例如，可以在useEffect中根据元素列表的依赖项来重新构建或更新refs.current，确保新元素有新的Ref，旧元素保留其Ref。

3. 可选链操作符: 在访问Ref的current属性时，使用可选链操作符?.（如refs.current[index]?.current?.scrollIntoView()）是一个好习惯，可以防止在Ref尚未绑定到DOM元素时引发错误。

4. 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使用》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！