为何React Context需用复杂JSX语法而非全局文件？

你忽略的核心是React的响应式渲染机制——全局变量没法和组件的渲染生命周期绑定，这会导致状态更新后页面不同步，而Context是为了适配React的设计理念而生的。下面具体说两者的差异：

1. 响应式更新的本质区别 #

全局变量的修改不会触发组件重渲染：

// globalcontext.ts
export let user = { name: 'Alice' };
export const updateUser = (newName: string) => {
  user.name = newName; // 这里修改了变量，但React完全不知情
};

在组件里导入使用时，就算调用updateUser('Bob')，组件也不会重新渲染，页面显示的还是旧名字，因为React没有监听全局变量的变化。

而Context的Provider会跟踪状态变化，一旦值更新，所有消费该Context的组件都会自动重渲染：

// UserContext.tsx
import { createContext, useContext, useState } from 'react';

// 定义Context类型
const UserContext = createContext<{
  user: { name: string };
  updateUser: (newName: string) => void;
}>({
  user: { name: '' },
  updateUser: () => {},
});

// 封装Provider组件
export const UserProvider = ({ children }: { children: React.ReactNode }) => {
  const [user, setUser] = useState({ name: 'Alice' });
  const updateUser = (newName: string) => {
    setUser({ name: newName }); // useState触发状态更新，通知Provider
  };
  return (
    <UserContext.Provider value={{ user, updateUser }}>
      {children}
    </UserContext.Provider>
  );
};

// 自定义Hook简化消费
export const useUser = () => useContext(UserContext);

组件里用const { user, updateUser } = useUser();，调用updateUser('Bob')后，组件会自动重渲染，页面同步显示新名字。

2. 组件树的隔离与复用 #

全局变量是应用级别的全局共享，没法给不同的组件分支设置独立的上下文。比如你在同一个页面有两个独立的用户面板，全局变量只能存一个用户信息，没法分别控制。

但Context支持嵌套Provider，不同的子树可以使用不同的Context值：

<div>
  <UserProvider value={{ user: { name: 'Alice' }, updateUser: ... }}>
    <UserPanel /> {/* 显示Alice */}
  </UserProvider>
  <UserProvider value={{ user: { name: 'Bob' }, updateUser: ... }}>
    <UserPanel /> {/* 显示Bob */}
  </UserProvider>
</div>

这种场景下全局变量完全没法实现。

3. 生命周期与状态清理 #

Context的Provider和组件生命周期绑定，当Provider被卸载时，消费组件会收到Context的默认值，能自动处理状态清理。而全局变量不会随组件卸载而重置，容易导致状态残留、内存泄漏，比如切换页面后，全局变量还保留着上一页的状态，下次进入页面时可能显示错误内容。

4. 可追踪性与调试 #

全局变量可以被任意地方修改，调试时很难找到状态变化的来源。而Context的状态更新都集中在Provider里，消费组件只能通过定义好的方法修改状态，逻辑更集中，调试起来更清晰。另外在React DevTools里，可以直接查看Context的状态变化，方便追踪。

补充：你提到的<Context.Consumer>是类组件时代的用法，现在函数组件用useContext Hook就能更简洁地消费Context，不需要嵌套Consumer组件。

总结：如果只是存纯工具函数、不需要组件响应的静态数据，用全局文件没问题；但只要涉及到需要组件同步更新的状态，Context是符合React渲染机制的官方解决方案。

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