目录

useContext1、Provider和 useContext2、Provider 和Consumer3、Provider 嵌套4、React.createContext提供的Provider和class的contextType属性5、读、写Context（1）父组件修改Context（2）子组件修改Context

好书推荐

useContext官方地址

使用 Context 深度传递数据

通常，您会通过 props 将信息从父组件传递到子组件。但是，如果您必须通过中间的许多组件传递信息，或者应用中的许多组件都需要相同的信息，则传递 props 会变得冗长且不方便。Context允许父组件向其下方树中的任何组件（无论深度如何）提供一些信息，而无需通过 props 明确传递。

简单来说使用<code>Context可以实现跨组件层级传递数据，不用层层传递数据。本文介绍三种Context的使用方式。

函数组件：React.createContext提供的Provider和useContext钩子React.createContext提供的Provider和ConsumerProvider嵌套Class组件：React.createContext提供的Provider和class的contextType属性读、写Context

useContext

useContext是一个 React Hook，可让您从组件读取和订阅上下文。

用法：

const value = useContext(SomeContext)

参数的含义：

SomeContext：使用createContext创建的上下文。上下文本身并不包含信息，它只代表您可以提供或从组件中读取的信息类型。

返回值的含义：

value：useContext返回调用组件的上下文值，传递给最接近的SomeContext的值。

1、Provider和 useContext

新建个context.js，导出createContext()的返回值

import { createContext } from "react";

export default createContext();

App.js，导入上面写的context，并使用context提供的Provider组件进行包裹，圈定局部的全局作用域，传值后可以提供给子组件进行消费。当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。

import Context from "./context";

import Test from "./Test"

function App() {

const value = "app 中的数据"

return (<>

<Context.Provider value={ value}>

<div className="Appy" >code>

<Test />

</div>

</Context.Provider>

</>

);

}

export default App;

新建个Test.js，

import Context from "./context"

import MyComponent from "./MyComponent"

const Test1 = () => {

return <>

<MyComponent/>

<div></div>

</>

}

export default Test1

新建个MyComponent.js，使用useContext钩子接收Context提供的参数

import Context from "./context"

import { useContext } from "react"

const MyComponent = ()=>{

const value = useContext(Context)

return <>

<div>value:{ value}</div>

</>

}

export default MyComponent

可以看到页面中显示如下：

使用Components分析如下：

2、Provider 和Consumer

上面的<code>MyComponent.js 文件，我们可以使用Context.Consumer组件接收数据。在MyComponent组件中，导入context，使用其提供的Consumer组件来订阅Context的变更,需要一个函数作为子元素,函数的第一个形参便是Provider组件提供的value值。如下：

import Context from "./context"

import { useContext } from "react"

const MyComponent = ()=>{

const value = useContext(Context)

return <>

<Context.Consumer>

{ value=><div>value1:{ value}</div>}

</Context.Consumer>

</>

}

export default MyComponent

3、Provider 嵌套

新建context.js，创建ThemeContext，AuthContext，然后再分别创建创建 ThemeContext 、AuthContext 的 Provider 组件，Provider 组件主要提供方法。

// context.js

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

// 创建 ThemeContext

const ThemeContext = createContext();

// 创建 ThemeContext 的 Provider 组件

const ThemeProvider = ({ children }) => {

const [theme, setTheme] = useState('light'); // 假设初始主题是 'light'

// 可以通过函数来切换主题

const toggleTheme = () => {

setTheme(theme === 'light' ? 'dark' : 'light');

};

return (

<ThemeContext.Provider value={ { theme, toggleTheme }}>

{ children}

</ThemeContext.Provider>

);

};

// 创建 AuthContext

const AuthContext = createContext();

// 创建 AuthContext 的 Provider 组件

const AuthProvider = ({ children }) => {

const [user, setUser] = useState(null); // 假设初始用户是 null

// 可以通过函数来设置用户

const login = (userData) => {

setUser(userData);

};

const logout = () => {

setUser(null);

};

return (

<AuthContext.Provider value={ { user, login, logout }}>

{ children}

</AuthContext.Provider>

);

};

// 导出 ThemeProvider 和 AuthProvider，以及它们各自的 Context

export { ThemeContext, ThemeProvider, AuthContext, AuthProvider };

App.js，导入ThemeProvider, AuthProvider，层层嵌套。

import React from 'react';

import { ThemeProvider, AuthProvider } from './context.js'; // 导入提供者

import MyComponent from './MyComponent'; // 假设您有一个 MyComponent 组件

const App = () => {

return (

<ThemeProvider >

<AuthProvider >

<MyComponent /> { /* MyComponent 现在可以访问 ThemeContext 和 AuthContext */}

</AuthProvider>

</ThemeProvider>

);

};

export default App;

MyComponent.js，导入ThemeContext, AuthContext ，使用useContext获取ThemeContext, AuthContext 的Provider组件传递的参数。

import React, { useContext } from 'react';

import { ThemeContext, AuthContext } from './context.js'; // 导入 Context

const MyComponent = () => {

console.log(useContext(ThemeContext),'useContext(ThemeContext)')

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

const { user, login, logout } = useContext(AuthContext);

console.log(useContext(AuthContext),'useContext(ThemeContext)')

// 使用 theme、toggleTheme、user、login 和 logout 做一些事情...

return (

// ... 组件的 JSX

<div>

<p>当前主题: { theme}</p>

<button onClick={ toggleTheme}>切换主题</button>

{ user ? (

<div>

<p>已登录用户: { user.name}</p>

<button onClick={ logout}>登出</button>

</div>

) : (

<button onClick={ () => login({ name: 'John Doe' })}>登录</button>

)}

</div>

);

};

export default MyComponent;

页面如下：

4、React.createContext提供的Provider和class的contextType属性

static contextType 是一种在类组件中直接访问 Context 值的方式，而不必明确地传递一个 <Context.Consumer> 组件。static contextType 应该被定义在类组件的外部，而不是在 render 方法内部或组件的类体内部。

挂载在 class 上的 contextType 属性会被重赋值为一个由React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中。

使用static关键字添加静态属性，和直接在class添加属性效果一致,最终都会添加到类上，而不是类的实例上

<code>import React, { Component } from "react";

import context from "./context";

class Test1 extends Component {

static contextType = context;

render() {

console.log(Test1.contextType,'contextType');

console.log(this.context,'context');

const value = this.context;

return <div>第三种使用Context方式获取的值：{ JSON.stringify(value)}

</div>;

}

}

// Test1.contextType = context; //此处与写static关键字作用一致

export default Test1;

可以看到打印的Test1.contextType为React.createContext() 创建的 Context 对象，打印this.context为最近的 Context 上的值

5、读、写Context

（1）父组件修改Context

App.js中，更改<code>Context数据，调用组件中的onChange方法。Provider的value不再传入一个简单结构的对象，而是将useState的返回值作为新对象的key/value，子组件便能调用App的setStore函数进行更新

import Context from "./context";

import Test from "./Test1"

import { useState } from "react"

function App() {

const value = "app 中的数据"

const [store, setStore] = useState(value);

const onChange = ()=>{

setStore("app 数据 change")

}

return (<>

<Context.Provider value={ { store, setStore}}>

<div className="Appy" >code>

<Test />

<button onClick={ onChange}>按钮</button>

</div>

</Context.Provider>

</>

);

}

export default App;

Test.js中，使用useContext接收Context数据。点击父组件中的按钮，数据从 app 中的数据变为app 数据 change

import Context from "./context"

import { useContext } from "react"

const Test1 = () => {

const value = useContext(Context)

console.log(value,'test1组件接收到的')

return <>

{ value.store}

<div></div>

</>

}

export default Test1

（2）子组件修改Context