React 中的上下文

在本文中，您将了解 React Context，这是 React 应用程序中的最新功能之一。
先决条件：ReactJS-Basics、Typescript（带接口）、ES6 表示法

什么是反应上下文？
React Context 是一种将 props 从父组件传递到子组件的方法，通过将 props 存储在 store 中（类似于 Redux）并由子组件从 store 中使用这些 props，而无需在每个级别实际手动传递它们的组件树。

为什么反应上下文？我们有 Redux！
使用 Redux 与从父组件到子组件的状态进行交互不仅很难理解，而且还会给您提供更复杂的代码。通过 Context 的使用，对概念和代码的理解远比 Redux 容易。

什么时候使用 React 上下文？
随时都可以！没有像在应用程序中何时使用 Context 这样的铁定规则。每当您希望商店保留您的状态或变量并在程序的其他地方使用它们时，请使用 Context。通常，当我们的组件树中有两个或更多级别（高度）时，可以使用存储而不是传递道具然后提升状态，因为这会造成混乱和不必要的冗长代码。
例子：
如果我们的应用程序中有三个组件，A->B->C，其中 A 是 B 的父级，B 是 C 的父级。要从 C 更改状态并将其传递给 A，请将 A 的状态保持在 a store，然后从store中提取状态并在C中使用。这完全消除了状态通过B的必要性。所以流程就像A->C。

用法
现在让我们通过一个简单的例子来理解。
首先，让我们定义一个由学生的姓名和分数组成的接口（或类）：

interface MarksContext{ 
name: string; 
marks: number; 
} 
 

现在在上下文中定义这个接口。

const contextmarks = React.createContext(null); 
// Context defined with properties of MarksContext interface initialized with null 
 

创建提供者和消费者

const MarksContextProvider = contextmarks.Provider; 
// This is the store in which states will be kept in and passed as props.
const MarksContextConsumer = contextmarks.Consumer; 
// This is the store from which states stored in the Provider 
// Context will be extracted by child component and used according to the user. 
 

现在，让我们的组件树结构像 A->B->C（从上面）。我们将一些名称和标记的值存储在字典中，从 A 传递信息以在 C 中显示它，而无需干预 B。A 是根 App。

完整代码：

注意：将两个文件保存在同一目录中。
1. MarksContext.tsx(打字稿)

Javascript

import * as React from "react";
 
export interface MarksContext{
  name: string;
  marks: number;
}
const contextmarks = React.createContext(null);
export const MarksContextProvider = contextmarks.Provider;
export const MarksContextConsumer = contextmarks.Consumer;

---

2. App.tsx(打字稿)

Javascript

import * as React from "react";
import { render } from "react-dom";
import { MarksContext, MarksContextProvider } from "./MarksContext";
import {  MarksContextConsumer } from "./MarksContext";
 
const sample: MarksContext = {
  name: "X",
  marks: 20
  
};
 
export const A = () => (
  
    
  
);
 
const B = () => (
  

    
Student Info
    
  
);
 
 
const C = () => (
  
    {appContext =>
      appContext && (
        

          Name: {appContext.name} 

          Marks: {appContext.marks} 

        
      )
    }
  
);
 
render(, document.getElementById("root"));

输出：

在职的：
信息首先在接口MarksContext中声明，然后在contextmarks中定义接口信息。 Provider( MarksContextProvider ) 和 consumer( MarksContextConsumer ) 在此上下文中定义。
MarksContextProvider放在A中，我们的应用程序的根目录中的值初始化为sample中给出的值。后来 MarksContextConsumer放在 C 中，通过appContext从中提取接口的值，appContext 作为MarksContext接口的实例。最后，该值显示在 C 中。

注意：只有 Provider ( MarksContextProvider ) 中提到的组件及其子组件可以使用 Consumer ( MarksContextConsumer ) 修改状态。