什么是React的上下文（Context）？

在React里，数据通常通过props从上往下传。但如果组件树很深，中间每一层都得帮忙传一下props，这就很烦人，像“prop drilling”（属性钻取）。React的Context（上下文）就是为了解决这个痛点，它让你能绕开中间层，直接把数据“广播”给树里任何需要的组件。

Context像一个数据广播站

你可以把Context想象成一个局部的、组件树范围内的“全局变量”。它包含两部分：一个Provider（提供者）和一个或多个Consumer（消费者）。
Provider通常放在组件树的高层，它把数据“装进”Context里。所有在它下面的子组件，不管嵌套多深，都能直接“订阅”到这个数据，不用再一层层手递手地传。

怎么用？创建、提供、消费

首先，用React.createContext()创建一个Context对象。它有个默认值，在找不到Provider时会用到。

const ThemeContext = React.createContext('light'); // 默认主题是 'light'

然后，在顶层组件用<ThemeContext.Provider value={当前值}>把数据包起来。

function App() {
  const [theme, setTheme] = useState('dark');
  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <button onClick={() => setTheme('light')}>切换主题</button>
    </ThemeContext.Provider>
  );
}

现在，Toolbar组件以及它下面的任何组件，都可以消费这个theme值了。在现代React中，最常用的消费方式是使用useContext Hook。

function ThemedButton() {
  const theme = useContext(ThemeContext); // 直接拿到 'dark'
  return <button className={theme}>按钮</button>;
}

这样，按钮直接拿到了主题，完全不用经过中间的Toolbar组件。

什么时候该用Context？

别一有数据共享就用Context。它适合那些真正全局的、很多不相关组件都需要的数据。典型的例子有：

• 当前用户身份（用户信息、权限）
• 主题（颜色、字号）
• 多语言/国际化
• 某些全局的状态管理（在某些场景下可替代部分Redux功能）

但要注意，Context的更新会触发所有消费它的组件重新渲染，哪怕它们只用到了Context里的一小部分数据。所以对于频繁更新的数据，或者结构很大的数据，用起来要小心，可能得配合memo或者更精细的状态管理库。

简单说，Context是React给你的一根“直达线”，让你能跨层级传递数据。用对了地方，它能极大简化代码结构；用错了，也可能带来性能问题。对于应用中那些稳定的、全局的配置数据，它是个非常趁手的工具。