React.createContext() 是React中的一个API，用于创建一个“上下文”，这是一种在组件树中传递数据的方法，而无需手动将props逐级传递。

这个方法接受一个参数，即默认值，当组件在树中上层没有找到对应的Provider时，就会使用这个默认值。

React.createContext() 返回一个对象，该对象包含两个React组件：Provider和Consumer。

Provider组件接受一个名为value的prop，你可以将任何数据类型的值传递给它。这个值将会被Provider的所有后代Consumer组件所消费。

Consumer组件使用一个函数作为子组件，这个函数接收当前的context值并返回一个React节点。当Provider的value值发生变化时，Consumer组件都将重新渲染。

在React新的版本中，也可以使用useContext这个Hook来消费context。

这个API的主要用途是共享可以被视为全局的数据，例如当前认证的用户、主题或首选语言等。

怎么使用

下面是一个简单的React应用，用React.createContext()创建了一个主题上下文，并在组件树中使用了Provider和Consumer。

import React from 'react';

// 创建一个主题上下文，默认值为“light”
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // 使用Provider组件传递当前的主题给子组件树
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// Toolbar组件并不关心主题，但是它包含了使用主题的子组件
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

// ThemedButton组件使用Consumer获取当前的主题
function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button theme={theme}>我是{theme}主题的按钮</button>}
    </ThemeContext.Consumer>
  );
}

export default App;

在这个例子中，我们创建了一个ThemeContext，并在App组件中使用ThemeContext.Provider组件传递了一个主题值（dark）。然后，在ThemedButton组件中，我们使用了ThemeContext.Consumer组件来获取当前的主题值，并将其应用于按钮。

这样，我们就可以在组件树中任何地方使用Consumer组件来访问主题值，而无需手动将主题值作为prop逐层传递。如果我们想要更改主题，只需更改App组件中Provider的value即可，所有的Consumer组件都会自动更新。

传递对象例子

以下是一个使用React.createContext()传递对象的示例：

import React from 'react';

// 创建一个主题上下文，默认值包含主题和切换主题的方法
const ThemeContext = React.createContext({
  theme: 'light',
  toggleTheme: () => {},
});

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: 'light',
      toggleTheme: this.toggleTheme,
    };
  }

  toggleTheme = () => {
    this.setState(prevState => ({
      theme: prevState.theme === 'light' ? 'dark' : 'light',
    }));
  };

  render() {
    // 使用Provider组件传递一个包含主题和切换主题方法的对象给子组件树
    return (
      <ThemeContext.Provider value={this.state}>
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {({ theme, toggleTheme }) => (
        <button onClick={toggleTheme} theme={theme}>
          我是{theme}主题的按钮
        </button>
      )}
    </ThemeContext.Consumer>
  );
}

export default App;

在这个例子中，我们创建了一个ThemeContext，并在App组件的构造函数中初始化了一个包含theme和toggleTheme的状态对象。然后我们将整个状态对象传递给ThemeContext.Provider的value属性。

在ThemedButton组件中，我们使用了ThemeContext.Consumer组件来获取当前的主题值和切换主题的方法。当点击按钮时，会调用toggleTheme方法来更改主题。

这样，我们就可以在组件树中任何地方使用Consumer组件来访问主题值和切换主题的方法，而无需手动将它们作为prop逐层传递。

React hooks 写法

使用 React Hooks 的写法会更简洁一些。以下是使用 React.createContext() 和 useContext hook 的示例：

import React, { useState, useContext } from 'react';

const ThemeContext = React.createContext();

function App() {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      我是{theme}主题的按钮
    </button>
  );
}

export default App;

在这个例子中，我们使用 useState hook 来创建 theme 状态和 setTheme 函数。然后我们创建一个对象，其中包含 theme 和 toggleTheme，并将该对象传递给 ThemeContext.Provider 的 value 属性。

在 ThemedButton 组件中，我们使用 useContext hook 来获取当前的主题值和切换主题的方法。当点击按钮时，会调用 toggleTheme 方法来更改主题。

这样，我们就可以在组件树中任何地方使用 useContext hook 来访问主题值和切换主题的方法，而无需手动将它们作为 prop 逐层传递。