React中如何高效更新组件数组实现按钮点击即时响应

你当前的实现踩了三个列表渲染的常见性能坑：

• 状态结构设计冗余：需求是选中两个点后高亮中间连续区间，你却存了所有选中按钮的索引数组，每次判断按钮是否选中都要跑indexOf做O(n)复杂度的遍历，按钮越多单次render计算量越大
• 子组件Props引用不稳定：每次父组件render都给每个Pressable生成新的内联style对象、新的匿名onPress函数，就算给按钮套memo，浅比较也会判定Props变更，根本没法跳过无效重渲染
• 无效渲染范围太大：点击一次按钮，父组件rerender会遍历所有按钮节点，哪怕90%的按钮选中状态根本没变化，也会走完整的渲染流程。

第一步：先把状态复杂度从O(n)降到O(1) #

连续区间选中的场景，根本不需要存所有选中的索引，只需要存选中的起点和终点两个值就够：

// 替换原来的pressedButtons数组
const [selectionRange, setSelectionRange] = useState({ start: null, end: null });

选中判断逻辑直接改成数值范围比较，从原来的数组遍历变成简单的大小判断，时间复杂度直接降为O(1)：

const isSelected = start !== null && (
  end === null ? index === start :
  index >= Math.min(start, end) && index <= Math.max(start, end)
)

点击逻辑也不需要再遍历生成所有选中索引，只需要更新首尾两个值就行，状态更新的开销也同步降低。

第二步：拆分子组件+稳定Props，让memo真正生效 #

把单个按钮抽成独立组件，用memo包裹，同时保证所有传给子组件的Props引用稳定，只有按钮自身的选中状态变化时才触发重渲染：

• 把选中、未选中的样式抽成组件外的静态常量，不要写内联样式对象，避免每次render生成新引用
• 列表项的点击回调统一用useCallback缓存，不要在map循环里写多层匿名函数
• 如果按钮数据有唯一id，优先用唯一id当key，不要单纯依赖数组下标，避免列表变动时出现组件复用错误

完整可运行代码：

import { useState, useCallback, memo } from 'react';
import { Pressable, Text, View } from 'react-native';

// 静态样式抽离到组件外，全局只初始化一次
const SELECTED_STYLE = { backgroundColor: 'red' };
const UNSELECTED_STYLE = { backgroundColor: 'white' };

// 单个按钮组件，memo包裹后props浅比较不通过才会重渲染
const ListButton = memo(({ text, isSelected, onPress }) => {
  return (
    <Pressable
      style={isSelected ? SELECTED_STYLE : UNSELECTED_STYLE}
      onPress={onPress}
    >
      <Text>{text}</Text>
    </Pressable>
  );
});

const Buttons = () => {
  const data = useState(getData())[0];
  const [selectionRange, setSelectionRange] = useState({ start: null, end: null });

  // 缓存点击回调，整个生命周期引用不变
  const handlePress = useCallback((index) => {
    setSelectionRange(prev => {
      if (prev.start === null) return { start: index, end: null };
      if (prev.end === null) return { ...prev, end: index };
      return { start: index, end: null };
    });
  }, []);

  return (
    <View>
      {data.map((buttonData, index) => {
        const { start, end } = selectionRange;
        const isSelected = start !== null && (
          end === null ? index === start :
          index >= Math.min(start, end) && index <= Math.max(start, end)
        );

        return (
          <ListButton
            key={buttonData.id ?? index}
            text={buttonData.getText()}
            isSelected={isSelected}
            onPress={() => handlePress(index)}
          />
        );
      })}
    </View>
  );
};

大量级场景的可选优化 #

如果按钮数量超过1000个，可以直接换成FlatList做虚拟列表渲染，只渲染屏幕可见范围内的按钮，进一步降低首屏和更新的渲染开销。针对你提到的100个按钮的场景，上面两步优化已经足够把点击延迟降到用户完全感知不到的程度：原来每次点击要全量重渲染100个按钮，优化后只有选中状态发生变化的按钮会触发重渲染，其余按钮的render流程会被memo直接跳过。

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