React Context 更新时，子组件一定会重新渲染吗？

在 React 开发中，Context 是跨组件传递状态的利器，但如果处理不当，它也会变成性能杀手的“重灾区”。下面从最基础的默认行为开始，层层剥茧。

第一层：默认逻辑, “父变子必变”

首先要明确，Context 的更新通常由某个 Provider 组件的 state 变化触发。

父组件渲染：当你点击按钮修改 Provider 内部 state 时，Provider 组件函数会重新执行。
连锁反应：在没有任何优化的情况下，React 的默认规则是，父组件一旦重新渲染，其内部嵌套的子组件都会跟着重新渲染。
误解澄清：很多时候子组件重渲染并不是因为 Context 变了，而是因为它的父组件（Provider）变了。

第二层：精准打击, “谁订阅，谁强制执行”

当我们讨论 Context 机制本身时，规则会更精准。

Consumer（消费者）：任何调用 useContext(MyContext) 的组件，都会被 React 标记为这个 Context 的订阅者。
强制更新：一旦 Provider 的 value 发生变化，所有订阅者都会重新渲染。即使你做了 React.memo，也不会阻止这次更新。
原因：React 会优先保证订阅者拿到最新上下文值，因此会绕过常规的 props 层拦截逻辑。

第三层：阻断重连, “没用 Context 的组件如何脱身？”

如果某个子组件既没有 useContext，也没有变化的 props，它可以不跟着 Provider 一起重渲染，但需要你手动打断渲染链。

1. 终极方案：Children 模式（内容提升）

这是 React 官方推荐度很高的一种写法：

jsx

function AppProvider({ children }) {
  const [count, setCount] = useState(0)

  return <MyContext.Provider value={count}>{children}</MyContext.Provider>
}

原理是：children 在 AppProvider 外部定义。当 AppProvider 重新渲染时，如果 children 的引用没有变化，React 就可能跳过这部分子树。

2. 传统方案：`React.memo`

如果子组件被 React.memo 包裹，并且它没有订阅 Context，那么当父组件重渲染时，React 会先比较 props。props 不变时，该组件可被跳过。

第四层：底层核心, “引用一致性（Reference Consistency）”

为什么有时候用了 useMemo 还是没效果？核心是 JavaScript 的引用类型。

React 内部使用 Object.is() 判断依赖是否变化。在 useMemo 或 Context 的 value 中，以下写法会让优化失效：

❌ 每次渲染都创建新对象：value={{ a: 1 }}
❌ 每次渲染都创建新函数：[() => {}]

结论：只有保持 React 依赖项（对象、函数、元素等）的引用稳定，React 的 bailout（跳过渲染机制）才会真正生效。