React （精读官方文档）-高级指引 - Context

React 的 Context API 允许我们跨组件树共享数据，而不必显式地通过组件层级的 props 属性传递数据。这对于全局状态管理非常有用，比如 Redux 或者 MobX。

以下是一个使用 Context 的示例：

import React, { Component, createContext, useContext } from 'react';
 
// 创建一个 Context 对象
const ThemeContext = createContext();
 
// 高阶组件，用于订阅 Context
const ThemeProvider = ThemeContext.Provider;
 
// 使用函数组件和 Hooks 来消费 Context
const useTheme = () => useContext(ThemeContext);
 
// 一个子组件，使用了 Context
const ThemedButton = () => {
  const theme = useTheme();
  return <button style={{ background: theme.background, color: theme.text }}>I am styled by theme context</button>;
};
 
class App extends Component {
  state = {
    theme: {
      background: 'blue',
      text: 'white'
    }
  };
 
  render() {
    // 提供 theme context 的值
    return (
      <ThemeProvider value={this.state.theme}>
        <ThemedButton />
      </ThemeProvider>
    );
  }
}
 
export default App;

在这个例子中，我们创建了一个 ThemeContext，然后通过 <ThemeProvider> 组件提供了一个 theme 对象。ThemedButton 组件通过 useContext Hook 订阅了这个 context，并使用了其中的 theme 信息来设置按钮的样式。这样，我们就可以在组件树的任何地方更新 theme，并且所有使用了这个 context 的组件都会自动更新样式。