React Native中FlatList的性能问题求助

1. 排查Redux状态更新的Immutable处理 #

检查reducer中收藏/取消收藏的逻辑，必须保证每次状态更新都返回新的数组/对象引用，绝对不能直接修改原数据：

// 错误示例：直接修改原数组，导致Redux无法检测状态变化，引发异常渲染
case TOGGLE_FAVORITE:
  state.recipes.find(r => r.id === action.payload.id).isFavorite = !isFavorite;
  return state;

// 正确示例：仅更新目标项，返回新数组
case TOGGLE_FAVORITE:
  return {
    ...state,
    recipes: state.recipes.map(recipe => 
      recipe.id === action.payload.id 
        ? {...recipe, isFavorite: !recipe.isFavorite} 
        : recipe
    )
  };

如果项目使用Immer，可以简化immutable操作，避免手动spread出错，同时保证性能。

2. 修复React.memo失效问题 #

RecipeItem组件用了React.memo但仍重复渲染，大概率是props存在不稳定引用：

• 不要直接传递匿名函数作为props，用useCallback包裹缓存引用：

  const toggleFavorite = useCallback((recipeId) => {
    dispatch(toggleFavoriteAction(recipeId));
  }, [dispatch]);
  

• 不要传递动态创建的对象/数组（比如每次渲染生成新的样式对象），把静态样式抽离到组件外部。
• 若默认浅比较不够，给React.memo传自定义比较函数，精准控制重渲染时机：

  export default React.memo(RecipeItem, (prevProps, nextProps) => {
    // 仅当食谱id或收藏状态变化时才重渲染
    return prevProps.recipe.id === nextProps.recipe.id && 
           prevProps.recipe.isFavorite === nextProps.recipe.isFavorite;
  });
  

3. 优化FlashList/FlatList渲染性能 #

• 确保keyExtractor使用唯一且稳定的标识（比如食谱的id），绝对不能用索引：

  <FlashList
    data={recipes}
    keyExtractor={(item) => item.id.toString()}
    renderItem={renderItem}
  />
  

• 确认开启removeClippedSubviews（FlashList默认开启，但可手动指定），减少不可见区域的组件渲染：

  <FlashList
    removeClippedSubviews={true}
    // 其他配置
  />
  

• 把renderItem中的渲染逻辑抽离到独立的、已优化的子组件中，避免在渲染函数内创建新组件或执行复杂计算。

4. 检查TabNavigator的页面缓存策略 #

• 查看TabNavigator的lazy配置：如果设为true，切换页面时未激活的页面会被卸载，返回时重新挂载，可能导致重复渲染和数据重复获取。可尝试设置lazy={false}（注意会增加初始内存占用），或使用react-navigation的页面缓存插件。
• 检查页面的useEffect是否重复订阅Redux数据，比如每次挂载都重新获取数据，引发状态重复更新。

5. 优化收藏操作逻辑 #

• 避免在收藏操作中多次遍历整个食谱数组：如果store中同时维护allRecipes和favoriteRecipes两个数组，更新时分别处理——allRecipes只修改目标项的isFavorite状态，favoriteRecipes仅添加/移除对应项，减少不必要的遍历开销。
• 拆分Redux selector：第二个页面如果只需要收藏的食谱，不要订阅整个allRecipes数组，单独创建selectFavoriteRecipes selector，减少组件获取的数据量。

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