createContext

createContext 是一个创建 上下文 便于组件数据相互提供和读取。

const AnyContext = createContext(defaultValue)

defaultValue：当包裹需要读取上下文的组件中没有匹配的上下文时，该值可用作上下文中。也可指定其为 null。该默认值是静态的，永远不会改变。

返回值

createContext 返回一个 context 对象。

1） createContext

//  在任意组件外调用 createContext 来创建一个上下文。import { createContext } from 'react';const ColorContext = createContext('light');

该 context 对象本身不包含任何信息。 它只表示其他组件读取或提供的那个context。

SomeContext.Provider 被它包裹的组件提供上下文的值。useContext(SomeContext) 经常使用的方式，用于读取上下文的值。SomeContext.Consumer 很少会用到的方式，它用于读取上下文的值。2）SomeContext.Provider

用上下文 provider 包裹你的组件，来为里面所有的组件指定一个 context 的值：

function App() {  const [color, setColor] = useState('light');  // ...  return (    <ColorContext.Provider value={color}>      <Page />    </ColorContext.Provider>  );}

先用旧的方式读取上下文：

function Button() {  //  旧的方式 (不推荐)  return (    <ColorContext.Consumer>      {color => (        <button className={color} />      )}    </ColorContext.Consumer>  );}

useContext() 来读取上下文：

function Button() {  // ✅ 推荐方式  const color = useContext(ColorContext);  return <button className={color} />;}

上面是同一个文件的使用方式，下面介绍一下不同文件的使用方式。

4）导入导出

也就是不同文件之间读取上下文

// Contexts.jsimport { createContext } from 'react';// 创建两个携带默认值的上下文export const CityContext = createContext('shanghai');export const AuthContext = createContext(null);

// Button.js// 引入其中一个上下文import { CityContext } from './Contexts.js';function Button() {  // 获取上下文信息  const theme = useContext(CityContext);  // ...}

// App.js// 引入两个上下文import { CityContext, AuthContext } from './Contexts.js';function App() {  // ...  return (    // 给两个上下文赋值    <CityContext.Provider value={theme}>      <AuthContext.Provider value={currentUser}>        <Page />      </AuthContext.Provider>    </CityContext.Provider>  );}

#前端##每日一诗#

-----------------------------------------

风急天高猿啸哀，渚清沙白鸟飞回。

无边落木萧萧下，不尽长江滚滚来。

万里悲秋常作客，百年多病独登台。

艰难苦恨繁霜鬓，潦倒新停浊酒杯。

------ 登高 [作者] 杜甫 [朝代] 唐