「React 知命境」第 28 篇
在 React 中，props 能够帮助我们将数据层层往下传递。而 context 能够帮助我们将数据跨层级往下传递。
context 的概念稍微有一点点多，但是我们在学习的他的时候，只需要将其分为两个部分，就能够轻松掌握
- 1、如何创建 context 与如何传递数据
- 2、组件中如何获取数据
context 如何创建与数据如何传递
react 中使用 createContext 在组件外部创建 context
const context = createContext(defaultValue)
context 本身不保存任何信息，他包含了两个引用
context.Provider 用于包裹子组件并传递数据
context.Consumer 用于在子组件中读取数据，不过这个读取方式已经非常少能有用武之地了，基本上都被 useContext 取代了。
一个非常简单的 demo 如下。首先我们一定要明确的把 Provider 当成顶层父组件，因为我们的目标就是把数据从父组件往更低层的子组件传递，因此我们首先要创建父组件
代码语言：javascript复制import { createContext } from 'react';
const ThemeContext = createContext('light');
function App() {
const [theme, setTheme] = useState('light');
// ...
return (
<ThemeContext.Provider value={theme}>
<Page />
</ThemeContext.Provider>
);
}
Provider 通过 value 将定义好的数据传递下去。在子组件 Page 以及他更低层的子组件中，我们都可以使用 useContext 来获取数据
数据如何获取
假如在上面案例的子组件 Page 内部，还有一个更底层次的子组件 Button , 在 Button 中，我们可以通过 useContext 这个 hook 来获取从顶层父组件传递过来的参数
function Button() {
// ✅ Recommended way
const theme = useContext(ThemeContext);
return <button className={theme} />;
}
当然，在以前我们也可以通过 Consumer 来获取，不过现在已经不推荐这样使用了
function Button() {
//
