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 逐層傳遞。
