React Context模块化后为何两种场景渲染行为不同？

问题核心 #

你遇到的差异本质是Context实例的作用域问题，两种场景下使用的Context并非同一个实例，导致订阅行为失效。

具体分析 #

Case1 不打印"inner2"的原因 #

在Case1的封装组件内部，你将const TestContext = createContext()写在了组件函数内部：

const TestProvider = ({ children }) => {
  const TestContext = createContext(); // 每次组件渲染都会创建新的Context实例
  const [count, setCount] = useState(0);
  return (
    <TestContext.Provider value={{ count, setCount }}>
      {children}
    </TestContext.Provider>
  );
};

• 组件每次重新渲染时，都会生成一个全新的TestContext实例
• 外部Inner2组件调用useContext(TestContext)时，使用的是模块顶部定义的另一个独立Context实例
• 两个Context实例完全无关，Inner2根本没有订阅到Provider内部的状态变化，因此不会触发重新渲染、打印"inner2"

Case2 正常打印的原因 #

Case2中你把Context实例定义在了模块全局作用域：

const TestContext = createContext(); // 全局唯一的Context实例

function App() {
  const [count, setCount] = useState(0);
  return (
    <TestContext.Provider value={{ count, setCount }}>
      {/* ...子组件 */}
    </TestContext.Provider>
  );
}

• Provider和Inner2使用的是同一个Context实例
• 当Provider的value变化时，订阅了该Context的Inner2会触发重新渲染，因此会打印"inner2"

修复方案 #

要实现模块化且保证复用性，需将Context实例提升到组件外部，确保全局唯一：

// 把Context实例定义在组件外部，保证全局唯一
const TestContext = createContext();

const TestProvider = ({ children }) => {
  const [count, setCount] = useState(0);
  return (
    <TestContext.Provider value={{ count, setCount }}>
      {children}
    </TestContext.Provider>
  );
};

// 可封装自定义Hook，避免外部直接依赖TestContext
export const useTestContext = () => useContext(TestContext);

这样无论TestProvider渲染多少次，Context实例都是同一个，子组件通过useTestContext订阅就能正常响应状态变化。

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