为何fiveElements无变化时Tab.Screen仍会重新渲染？

核心原因 #

你遇到的不必要重渲染，根源在于**Tab.Screen的children使用了内联箭头函数**。

每次包含该Tab.Screen的父组件触发渲染时，这个内联箭头函数都会被重新创建（生成新的函数引用）。React Navigation会将这个新的children视为一个完全不同的组件，因此会卸载旧的SheetScreen实例，重新挂载新的实例——这就导致了即使fiveElements状态没有变化，页面依然会被重新渲染。

解决方案 #

方案1：改用component属性传递组件（推荐） #

将内联的children替换为component属性直接传递SheetScreen的引用，通过导航参数传递fiveElements：

<Tab.Screen 
  name="Sheet" 
  component={SheetScreen}
  initialParams={{ fiveElements: fiveElements }}
  options={{
    tabBarLabel: 'Sheet',
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="information-outline" color={color} size={size} />
    ),
  }}
/>

在SheetScreen中通过route.params获取参数：

const SheetScreen = ({ route }) => {
  const { fiveElements } = route.params;
  // 组件逻辑
};

如果fiveElements需要动态更新，可以在父组件中通过navigation.setParams更新参数，同时在SheetScreen中监听参数变化。

方案2：用React.memo优化组件（可选） #

如果必须保留children的写法，可以用React.memo包裹SheetScreen，让组件浅比较props，避免props未变化时的重渲染：

// 先创建记忆化的组件
const MemoizedSheetScreen = React.memo(SheetScreen);

// 在Tab.Screen中使用
<Tab.Screen 
  name="Sheet" 
  children={() => <MemoizedSheetScreen fiveElements={fiveElements}/>}
  options={{
    tabBarLabel: 'Sheet',
    tabBarIcon: ({ color, size }) => (
      <MaterialCommunityIcons name="information-outline" color={color} size={size} />
    ),
  }}
/>

注意：这种方式只是缓解问题，内联函数依然会在父组件渲染时重新创建，因此优先推荐方案1。

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