Context API

Tue, 17 Dec 2024 00:00:00 +0800

先看看React官网对于Context的介绍

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

个人理解转成大白话：Context提供了一个局部的全局作用域，使用Context则无需再手动的逐层传递props。

本文主要介绍3种Context的使用方式：

React.createContext提供的Provider和Consumer
函数组件：React.createContext提供的Provider和useContext钩子
Class组件：React.createContext提供的Provider和class的contextType属性

第一种：React.createContext提供的Provider和Consumer

先写好使用Context的基础环境条件，后续的代码都是基于此环境

//创建一个文件，暂且命名为context.js，导出createContext()的返回值
import { createContext } from "react";

export default createContext();

在根组件App.jsx中，导入上面写的context，并使用context提供的Provider组件进行包裹，圈定局部的全局作用域，传值后可以提供给子组件进行消费

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

import React, { createContext } from "react";
import MyContext from "./context";

import GeneralC from "./GeneralC";
import FnC from "./FnC";
import ClassC from "./ClassC";

export default function App() {
 return (
 //Provider组件接收一个value属性，此处传入一个带有name属性的对象
 <MyContext.Provider value={{ name: `context's value is string!` }}>
 {/*这里写后面要进行包裹的子组件,此处先行导入后续需要消费context的3个组件*/}
 <GeneralC/>
 <hr/>
 <FnC/>
 <hr/>
 <ClassC/>
 </MyContext.Provider>
 );
}

在GeneralC组件中,导入context,使用其提供的Consumer组件来订阅Context的变更,需要一个函数作为子元素,函数的第一个形参便是Provider组件提供的value值

import React, { useReducer } from "react";
import MyContext from "./context";

const GeneralC = () => {
 return (
 //
 <MyContext.Consumer>
 {(value) => {
 return (
 <div>
 第一种使用Context方式获取的值：{JSON.stringify(value)}
 </div>
 );
 }}
 </MyContext.Consumer>
 );
};

export default GeneralC;

此时页面中应该出现json格式的value值

Context API on Last Stand

Context API

先看看React官网对于Context的介绍

第一种：React.createContext提供的Provider和Consumer