React中未被React.memo包裹的子组件为何在Context Provider重渲染时未重渲染

问题核心原因 #

这个现象本质是React重渲染规则和props.children的引用特性共同作用的结果，你之前了解的「未被React.memo包裹的子组件随父组件重渲染而重渲染」有一个前提：子组件是父组件在自身渲染逻辑中直接声明创建的。

高效示例的运行逻辑

1. <App>组件只在首次渲染时执行一次，后续context更新不会触发<App>重渲染（因为它没有消费ThemeContext），所以<App>传给ThemeContextProvider的props.children（也就是ThemeSelector、ThemedTickerComponent、TickerComponent(2)这三个子元素的引用）从来不会发生变化。
2. 当ThemeContextProvider内部state更新触发自身重渲染时，它返回的内容是<ThemeContext.Provider value={state}>{props.children}</ThemeContext.Provider>，这里用到的children是从外部传入的固定引用，React判断这部分子元素的props没有变化，就不会触发它们的默认重渲染。
3. 此时只有主动消费了ThemeContext的组件（ThemeSelector、ThemedTickerComponent）会因为context值更新，触发自身的重渲染，和ThemeContextProvider是否重渲染没有直接关系。

低效示例的运行逻辑

1. <App>组件自己消费了ThemeContext，所以context值更新时会先触发<App>自身重渲染。
2. <App>重渲染时，是在自身的return逻辑里直接创建了所有子元素（主题选择器、ThemedTickerComponent(1)、TickerComponent(2)），相当于每次重渲染都会生成新的子元素props，所以未被React.memo包裹的TickerComponent(2)会跟着父组件重渲染，符合你之前了解的规则。

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