React：props变化时如何更新useRef数组且不重渲染子组件？

首先得指出你原来代码里的两个关键问题：

• 违反了React Hooks的规则：不能在循环（或者Array.from的回调）里调用useRef，Hooks必须在组件的顶层作用域调用，否则会导致React无法正确追踪Hooks的状态，这也是ref数组没正确更新的核心原因之一。
• 直接在组件函数体里创建ref数组，每次组件渲染都会生成新数组，而如果子组件被React.memo包裹阻止重渲染的话，这段代码根本不会执行，自然无法更新ref数组。

下面是符合需求的实现方案，既能在props变化时更新ref列表，又能避免不必要的子组件重渲染：

实现步骤 #

1. 用useRef维护ref数组：创建一个顶层的useRef来保存所有DOM元素的ref对象数组，确保数组的引用稳定，不会随组件渲染而重新创建。
2. 在useLayoutEffect中更新数组：监听props.menuItems的变化，根据新的菜单长度调整ref数组——长度增加时补充新的ref对象，长度减少时截断数组。
3. 用React.memo包裹子组件：避免props变化时的无意义重渲染，只有当菜单内容真正变化时才会触发重渲染（你可以自定义memo的比较函数来更精准控制）。
4. 使用唯一key：不要用索引作为列表项的key，改用菜单元素的唯一标识（比如id），确保ref能正确绑定到对应的DOM元素上。

完整代码示例 #

import React, { useRef, useLayoutEffect, memo } from 'react';

// 用memo包裹子组件，避免不必要的重渲染
const ChildComponent = memo((props) => {
  // 用useRef保存ref数组，初始为空数组
  const itemsRef = useRef([]);

  useLayoutEffect(() => {
    const newMenuLength = props.menuItems.length;
    const currentRefLength = itemsRef.current.length;

    // 根据新的菜单长度调整ref数组
    if (newMenuLength > currentRefLength) {
      // 为新增的菜单项添加新的ref对象（React接受任何带current属性的对象作为ref）
      const newRefs = Array.from({ length: newMenuLength - currentRefLength }, () => ({ current: null }));
      itemsRef.current.push(...newRefs);
    } else if (newMenuLength < currentRefLength) {
      // 截断数组，移除多余的ref对象
      itemsRef.current = itemsRef.current.slice(0, newMenuLength);
    }

    // 这里处理新增项的进入动画逻辑
    const addedRefs = itemsRef.current.slice(currentRefLength);
    addedRefs.forEach(ref => {
      if (ref.current) {
        // 示例：添加淡入动画
        ref.current.style.opacity = '0';
        requestAnimationFrame(() => {
          ref.current.style.transition = 'opacity 0.3s ease';
          ref.current.style.opacity = '1';
        });
      }
    });
  }, [props.menuItems]); // 依赖项是menuItems，确保props变化时触发effect

  return (
    <ul>
      {props.menuItems.map((item, index) => (
        // 使用item的唯一标识作为key，不要用index
        <li key={item.id} ref={itemsRef.current[index]}>
          {item.name}
        </li>
      ))}
    </ul>
  );
});

export default ChildComponent;

关键细节说明 #

• 为什么不用useRef创建单个ref？：因为useRef必须在组件顶层调用，不能在循环或effect里动态创建，所以我们直接创建普通的{ current: null }对象——React会把DOM元素赋值给这个对象的current属性，效果和useRef(null)完全一致。
• React.memo的作用：它会浅比较前后两次的props，只有当props真正变化时才会重新渲染子组件。如果你的menuItems是复杂对象，可以传递第二个参数自定义比较函数，比如只比较菜单的长度和内容哈希值，进一步优化性能。
• 动画处理时机：useLayoutEffect会在DOM更新后、浏览器绘制前执行，适合处理需要同步DOM状态的动画逻辑，确保动画不会出现闪烁。

内容的提问来源于stack exchange，提问作者BrownBe