含useContext的组件是否适合React.memo？上下文变化时能否重渲染？

纯组件的 memo 化示例 #

先看一个明确的纯组件：

function DefinitelyPure({label}:{label:string}) {
  return <View><Text>{label}</Text></View>
}

我们可以安全地对它进行 memo 化处理：

const DefinitelyPure= React.memo(function ({label}:{label:string}) {
  return <View><Text>{label}</Text></View>
});
DefinitelyPure.displayName = "DefinitelyPure";

含 useContext 的组件场景 #

但如果组件使用了基于useContext的useTheme()（用户切换主题时其值会变化），代码如下：

function DefinitelyPure({label}:{label:string}) {
  const theme = useTheme();
  return <View style={{backgroundColor: theme.primary.backgroundColor}}><Text>{label}</Text></View>
}

问题解答 #

• memo 化后的组件会在上下文变化时触发重渲染吗？
  会的。React.memo仅会在组件 props 浅比较无变化时跳过重渲染，但它无法阻断上下文更新带来的重渲染逻辑。只要组件通过useTheme()订阅了主题上下文，当上下文内容（比如切换主题）更新时，无论是否 memo 化，组件都会触发重渲染。

• 使用 useContext 的组件是否还能作为 React.memo 的候选？
  当然可以。虽然上下文变化会触发重渲染，但React.memo依然能在props 无变化、上下文也未更新的场景下，避免组件因父组件其他状态更新而产生的无意义重渲染，从而提升整体性能。简单来说，React.memo和useContext并不冲突，memo 化依然能为这类组件带来有效的性能优化价值。

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