Was ist die Verwendung von Kontext in React

In React wird der Kontext zum Teilen von Daten verwendet und ermöglicht die Weitergabe von Daten über Generationen hinweg. Der Kontext bietet eine neue Möglichkeit, Daten zwischen Komponenten auszutauschen, ohne dass Requisiten explizit Schicht für Schicht durch den Komponentenbaum geleitet werden müssen, wodurch die Verwendung von Lots vermieden werden kann wiederholte Requisiten zur Übergabe von Werten.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist die Verwendung von Kontext in React?

Context bietet eine neue Möglichkeit, Daten zwischen Komponenten auszutauschen und ermöglicht die Weitergabe von Daten über Generationen hinweg, ohne dass Requisiten explizit Schicht für Schicht durch den Komponentenbaum geleitet werden müssen.

Context bietet eine Möglichkeit, Werte zwischen Komponenten auszutauschen, ohne Requisiten explizit durch jede Ebene des Komponentenbaums weiterleiten zu müssen. Wenn die Ebenen des Erhaltens des Werts und der Verwendung des Werts weit voneinander entfernt sind oder die Komponenten, die den Wert verwenden müssen, zahlreich und verstreut sind, können Sie Kontext verwenden, um Daten gemeinsam zu nutzen und die Verwendung einer großen Anzahl wiederholter Requisiten zum Übergeben des Werts zu vermeiden. Wenn nur eine Komponente diesen Wert verwenden muss, können Sie die Komponente an der Stelle generieren, an der der Wert generiert wird, und sie dann mithilfe von Requisiten Schicht für Schicht an die Stelle übergeben, an der die Komponente tatsächlich angezeigt wird.

Grundlegende Verwendung

1. Benutzerdefinierter Kontext

import React from 'react';
 
const ThemeContext = React.createContext('light');
 
export default ThemeContext;

Der obige Code definiert einen ThemeContext und der Standardwert ist „light“.

2. Verwenden Sie den Kontextanbieter bei Bedarf.

import ThemeContext from './context/ThemeContext.js';
import ThemedButton from './ThemedButton.js';
import './App.css';
 
function App() {
  return (
    <ThemeContext.Provider value=&#39;dark&#39;>
      <div className="App">
        <header className="App-header">
          <ThemedButton />
        </header>
      </div>
    </ThemeContext.Provider>
  );
}
 
export default App;

Verwenden Sie den benutzerdefinierten Kontextanbieter auf der äußersten Ebene der Komponente und übergeben Sie den Wert, um den vom Sub gelesenen Standardwert zu überschreiben -Komponente ist „dunkel“ anstelle des Standardwerts „hell“. Wenn der Anbieter über eine Wertdefinition verfügt, wird der Wert des Werts verwendet (auch wenn der Wert nicht definiert ist, d. h. kein Wert übergeben wird). Der Standardwert der Definition wird nur verwendet, wenn der Anbieter keinen Wert bereitstellt Es.

3. Definieren Sie den contextType und verwenden Sie den Wert für den erhaltenen Context.

import React, { Component } from 'react';
import ThemeContext from "./context/ThemeContext.js";
 
class ThemedButton extends Component {
static contextType = ThemeContext;
render() {
return <button>{this.context}</button>;
}
}
 
export default ThemedButton;

ThemedButton deklariert, dass der contextType ThemeContext ist, sodass der Wert von this.context der vom nächstgelegenen ThemeContext bereitgestellte Wert ist, der „light“ ist.

Rendering:

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von Kontext in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!