React Native中如何为数组元素存储refs引用？

核心结论 #

不可以直接修改原数组插入ref，这种直接突变（mutate）原始数据的写法违反React的不可变数据原则，会带来几个明确的问题：

• 如果数组是通过useState管理的状态，React无法检测到你直接修改原对象带来的变化，后续状态更新时你插入的ref很容易被覆盖丢失
• 原始数据源被污染，其他复用该数组的逻辑会出现非预期的异常，bug排查成本极高
• React严格模式下渲染会双执行，直接修改原数组会导致ref引用错乱、重复绑定的问题

推荐实现方案 #

最稳妥的方式是单独用useRef维护一个ref映射表，完全不改动原始数组数据，通过元素唯一标识（比如示例里的id）关联对应ref：

import { useRef } from 'react';
import { View, Text } from 'react-native';

// 原始业务数组，全程不做修改
const items = [
  {
    id: "1",
    name: "Text1",
  },
  {
    id: "2",
    name: "Text2",
  },
];

export default function ItemList() {
  // 存储所有列表项的ref，key为item id，value为组件/元素实例
  const itemRefMap = useRef({});

  // 示例：获取id为1的元素做测量操作
  const measureFirstItem = () => {
    const firstItemRef = itemRefMap.current["1"];
    firstItemRef?.measure((x, y, width, height, pageX, pageY) => {
      console.log('元素位置信息', {x, y, width, height, pageX, pageY});
    });
  };

  return (
    <View>
      {items.map(item => (
        <Text
          key={item.id}
          ref={element => {
            if (element) itemRefMap.current[item.id] = element;
          }}
        >
          {item.name}
        </Text>
      ))}
    </View>
  );
}

特殊场景处理 #

如果你确实需要把ref和数组元素绑定后统一传递，必须新建数组、浅拷贝元素后再追加ref属性，绝对不能修改原始数组：

// 生成新的渲染专用数组，不改动原始items
const renderItems = items.map(item => ({
  ...item,
  elementRef: React.createRef()
}));

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