Communication des composants dans React (react18) 03 - utilisez simplement Context pour transmettre les paramètres en profondeur

1. Introduction

1.1 Autres moyens de communication entre les composants dans React

• Communication du composant 01 dans React (react18) - props .
• Communication du composant dans React (react18) 02 - abonnement et publication de messages, désabonnement et désabonnement lors de la désinstallation du composant .

1.2 Mener au contexte

• Scénario de demande :
  • Nous savons que si le père transmet à son fils, des accessoires peuvent être utilisés, et si le fils transmet à son petit-fils, des accessoires peuvent également être utilisés. Cependant, si la famille est nombreuse, la relation qui la compose est comme un grand arbre, lui transmettant tous les en bas. Si des accessoires sont encore utilisés à ce moment-là, ce sera évidemment un problème. Cela semble un peu fatiguant.
    • Et si ce paramètre n'est pas obligatoire, il n'est pas très raisonnable de le transmettre couche par couche via les accessoires.
    • Ou, si le descendant est trop éloigné de la racine, si des accessoires sont toujours utilisés pour le transmettre couche par couche, alors le passage des accessoires deviendra très fastidieux et peu pratique.
  • Cela nécessite de réfléchir à la manière de sauter la génération intermédiaire et de la transmettre aux générations suivantes ? Cela nécessite que le contexte soit introduit ensuite...
• Vous pouvez transmettre des paramètres en profondeur à l'aide de Context, qui peut être utilisé dansarborescence des composantsmilieuAucun accessoire n'est requis pour "transmettre" les données "directement" dans les composants requis, voir l'introduction du site officiel :
  
  

2. Exemple simple

• Examinons d'abord l'effet de l'implémentation, comme suit : le composant grand-père envoie un message au composant petit-fils :
  
• Conception du code – structure des répertoires
  
• Conception du code - mise en œuvre du code
  • contexte.js + App.js + index.js
    
  • Parent.jsx + Enfant.jsx + GrandSon.jsx
    

3. Description grammaticale

3.1 createContext(valeur par défaut)

• comme suit:
  

valeur 3.2

• value: Cette valeur est ce que vous souhaitez transmettre à tous les composants de ce fournisseur qui lisent ce contexte, quelle que soit leur profondeur. La valeur du contexte peut être de n’importe quel type. Les composants de ce fournisseur peuventObtenez la valeur du fournisseur de contexte le plus proche au-dessus en appelant useContext(SomeContext)。

3.3 utiliserContext(SomeContext)

• Appelez useContext au niveau supérieur du composant pour lire et vous abonner au contexte.
  

4. Résumé

4.1 Contexte

4.1.1 Résumé du contexte

• Le contexte permet à un composant de fournir des informations à l'ensemble de l'arborescence située en dessous de lui.
• Méthode pour passer le contexte:
  • export const MyContext = createContext(defaultValue)Créez et exportez un contexte via .
  • Dans n'importe quel composant enfant, quelle que soit la profondeur de la hiérarchie, transmettez le contexte au useContext(MyContext)Hook pour le lire.
  • Fournissez du contexte en enveloppant les enfants dans <MyContext.Provider value={...}> dans le composant parent.
• Le contexte passera par tous les composants intermédiaires.
• Le contexte vous permet d'écrire des composants « plus généraux ».
• Avant d'utiliser le contexte, essayez de passer des accessoires ou de passer JSX en tant qu'enfants.

4.1.2 Scénarios d'application contextuelle

• Voir l'introduction du site officiel :
  

4.1.3 Contexte-site officiel

• Comme suit :
  https://zh-hans.react.dev/learn/passing-data-deeply-with-context .

4.2 créerContext

• Le contexte permet aux composants de transmettre des informations couche par couche sans transmettre explicitement de paramètres.
• existeren dehors de tout composantAppelez createContext pour créer un ou plusieurs contextes.
  Parce que, généralement, les composants de différents fichiers devront lire le même contexte. Par conséquent, il est devenu courant de définir le contexte dans un fichier séparé. Vous pouvez utiliser l'instruction export pour l'exporter afin que d'autres fichiers puissent les lire et les utiliser.
• Reportez-vous au site officiel :
  https://zh-hans.react.dev/reference/react/createContext#createcontext .

4.3 utiliserContext()

• Si React ne trouve aucun fournisseur pour ce contexte particulier dans l'arborescence parent, la valeur de contexte renvoyée par useContext() sera égale à la valeur par défaut que vous avez spécifiée lors de la création du contexte ;
• createContext(defaultValue)Notez que la valeur par défaut de l'appel n'est utilisée que s'il n'existe aucun fournisseur correspondant . S'il y a <SomeContext.Provider value={undefined}>un composant quelque part dans l'arborescence parent, seContext(SomeContext)le composant appelant u recevra undefinedla valeur comme contexte.
• Reportez-vous au site officiel :
  https://zh-hans.react.dev/reference/react/useContext .

5. Code ci-joint

• contexte.js

  /**
   * 1. 通常，来自不同文件的组件都会需要读取同一个 context。
   * 2. 因此，在一个单独的文件内定义 context 便成了常见做法。
   * 3. 你可以使用 export 语句 将其导出，以便其他文件读取使用
   */
  import {
        
         createContext } from "react";
  
  const MessegeContext = createContext();
  
  export default MessegeContext;
  
  
  // import { createContext } from 'react';
  
  // export const ThemeContext = createContext('light');
  // export const AuthContext = createContext(null);
  

• Parent.jsx

  import React from "react";
  import Child from "./Child";
  import './index.css'
  import {
        
         useState } from "react";
  import MessegeContext from "./context.js";
  
  
  function Parent() {
        
        
      const [notice, setNotice] = useState('孙子，你真棒！！');
  
      return(
  
          // <div className="parent">
          //     我是父组件!
  
          //     <div className="child">
          //         <Child notice={'通知——今天放假！'}/>
          //     </div>
          // </div>
  
          // 这里的属性，只能用 value
          <MessegeContext.Provider value={
        
        notice}>
              <div className="parent">
                  我是父组件!
  
                  <div className="child">
                      <Child notice={
        
        '通知——今天放假！'}/>
                  </div>
              </div>
          </MessegeContext.Provider>
  
      )
  }
  
  export default Parent;
  

• Enfant.jsx

  import React from "react";
  import GrandSon from "./GrandSon";
  import './index.css'
  
  function Child(props){
        
        
  
      return(
          <div>
              我是子组件！！！
              <br /><br />
              收到来自于父组件的数据：{
        
        props.notice}
  
              <br /><br />
              <div className="grandSon">
                  <GrandSon />
              </div>
             
          </div>
      )
  }
  
  export default Child;
  

• GrandSon.jsx

  import {
        
         useContext } from "react"
  import MessegeContext from "./context.js";
  
  export default function GrandSon(){
        
        
  
      // 在组件的顶层调用 useContext 来读取和订阅 context。
      const msgContent = useContext(MessegeContext);
      
      console.log(msgContent);
      
      return(
          <div>
              我是孙组件！！
  
              <br />
              我收到爷爷的信息是：{
        
        msgContent}
  
          </div>
      )
  }
  

• composantnet–>index.css

  .parent{
      background-color: blueviolet;
      border: 1px solid;
      height: 900px;
      width: 600px;
      text-align: center;
  }
  
  .child{
      background-color: green;
      height: 300px;
      margin: 20px;
  }
  
  .grandSon{
      background-color: grey;
      height: 150px;
      margin: 20px;
  }