如何避免React Native FlatList重渲染屏幕外props变更的组件？

问题根源 #

你当前的实现中，每个CellText都直接通过useSelector订阅全局的highlightAny状态——只要这个状态变化，所有CellText组件（包括屏幕外未渲染的）都会触发重渲染检查，哪怕用了memo也无法阻止，因为每个组件都独立订阅了Redux状态。

优化方案 #

1. 提全局状态订阅到FlatList父层级

把highlightAny的订阅从CellText上移到FlatList所在的父组件，通过props往下传递给可见的Row/Cell，避免每个子组件单独订阅全局状态：

// FlatList所在父组件
import { useSelector } from 'react-redux';

const MatrixContainer = () => {
  const highlightAny = useSelector<RootState, boolean>(state => state.mat.highlightAny);

  return (
    <FlatList
      contentContainerStyle={styles(styleProps).scrollCont}
      data={lineIds}
      renderItem={(itemData) => (
        // 仅给当前渲染的Row传递highlightAny
        <Row id={itemData.item} lineIdx={itemData.index} highlightAny={highlightAny} />
      )}
      keyExtractor={item => item}
      // 开启FlatList原生性能优化
      removeClippedSubviews={true}
      maxToRenderPerBatch={5}
      windowSize={5}
    />
  );
};

2. 用memo包裹Row/Cell，控制重渲染范围

给Row和Cell组件加上memo，确保只有当传入的props变化时才重渲染：

// Row组件
import { memo } from 'react';

const Row = memo(({ id, lineIdx, highlightAny }: RowProps) => {
  return (
    <View style={styles.row}>
      {/* 给每个Cell传递highlightAny */}
      {cellIds.map(cellId => (
        <Cell key={cellId} id={cellId} highlightAny={highlightAny} />
      ))}
    </View>
  );
});

// Cell组件
const Cell = memo(({ id, highlightAny }: CellProps) => {
  // 仅订阅当前Cell的高亮状态，而非全局状态
  const highlightEn = useSelector<RootState, boolean>(state => state.mat.cellHighlights[id]);
  // 直接计算最终是否需要置灰，避免CellText处理逻辑
  const shouldGrayOut = highlightAny && !highlightEn;

  return (
    <View style={styles.cell}>
      <CellText shouldGrayOut={shouldGrayOut} text={cellText} />
    </View>
  );
});

3. 简化CellText，仅依赖自身必要props

让CellText完全脱离Redux订阅，只接收最终的样式判断结果，彻底避免全局状态变化带来的重渲染：

// CellText组件
const CellText = memo(({ shouldGrayOut, text }: CellTextProps) => {
  const textStyle = shouldGrayOut ? styles.grayText : styles.normalText;
  return <Text style={textStyle}>{text}</Text>;
});

4. 可选：用shallowEqual优化选择器

如果必须在Cell层订阅状态，给useSelector加上shallowEqual，避免不必要的重渲染检查：

import { shallowEqual } from 'react-redux';

const highlightEn = useSelector<RootState, boolean>(
  state => state.mat.cellHighlights[id],
  shallowEqual
);

优化原理 #

• FlatList只会渲染可见范围内的Row，屏幕外的Row不会接收highlightAny的props变化，自然不会触发Cell和CellText的重渲染。
• CellText不再依赖全局Redux状态，仅当自身shouldGrayOut或text变化时才重渲染，彻底切断全局状态变化的影响链。

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