如何减少React Native FlatList的重复渲染

问题根源分析 #

1. renderItem 函数频繁重建：ComponentA每次重渲染时，renderItem都是全新的匿名函数，FlatList会检测到该属性变化，进而触发所有列表子组件重渲染。
2. useEffect 依赖缺失：ComponentB中的useEffect未指定依赖数组，导致每次组件渲染都会执行副作用，甚至间接引发重渲染。
3. 父组件状态更新连锁反应：修改与列表无关的状态y时，ComponentA重渲染，由于renderItem未缓存，所有ComponentB都会跟着重渲染，即使使用了memo也无效。

分步解决方案 #

• 用 useCallback 缓存 renderItem 函数
  在ComponentA中，通过useCallback缓存renderItem，避免父组件重渲染时函数引用变化：

  import { useCallback } from 'react';
  
  const ComponentA = () => {
    const [x, setX] = useState([]);
    const [y, setY] = useState(0);
  
    const loadMore = () => {
      // ...加载更多数据逻辑
      setX(newX);
      setY(1);
    };
  
    // 缓存renderItem，依赖项为空（item来自data，keyExtractor保证唯一标识）
    const renderItem = useCallback(({ item }) => {
      return <ComponentB item={item} />;
    }, []);
  
    return (
      <FlatList
        data={x}
        keyExtractor={item => item.id}
        onEndReached={loadMore}
        renderItem={renderItem}
      />
    );
  };
  

• 修复 ComponentB 的 useEffect 依赖
  给useEffect添加正确的依赖数组，确保仅当item变化时才执行副作用：

  const ComponentB = ({ item }) => {
    useEffect(() => {
      // 基于item请求数据的逻辑
    }, [item]); // 明确指定item为依赖项
  
    return (...);
  };
  
  export default memo(ComponentB);
  

• 保证 item 引用的稳定性
  如果加载新数据时，newX中的item是全新对象（比如每次请求后重新创建），即使内容相同，memo也会判定props变化。可以：

  • 加载数据时合并原有item，保留旧item的引用；
  • 或者使用自定义比较器进行深比较：

    // 可自行实现深比较，或引入lodash的isEqual
    const compareProps = (prevProps, nextProps) => {
      return JSON.stringify(prevProps.item) === JSON.stringify(nextProps.item);
    };
    
    export default memo(ComponentB, compareProps);
    

• 处理导航返回时的重渲染
  导航返回时父组件可能重渲染，只要renderItem已缓存且item引用稳定，ComponentB就不会重复渲染。若仍有问题，检查是否存在全局状态/上下文导致父组件重渲染，必要时用useMemo缓存FlatList的data：

  const stableData = useMemo(() => x, [x]);
  
  return (
    <FlatList
      data={stableData}
      // ...其他属性
    />
  );
  

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