Detaillierte Erläuterung der Kontext-API von React 16.3

React hat in Version 16.3-alpha eine neue Kontext-API eingeführt, und die Community freut sich darauf. Lassen Sie uns zunächst anhand eines einfachen Beispiels sehen, wie die neue Kontext-API aussieht, und dann kurz die Bedeutung der neuen API besprechen.

Sie müssen die 16.3-alpha-Version von React installieren. Die Konstruktionsschritte stehen nicht im Mittelpunkt dieses Artikels. Dieser Artikel teilt Ihnen hauptsächlich die detaillierte Erklärung der Kontext-API von React 16.3 mit.

npm install react@next react-dom@next

Schauen wir uns den Code direkt an. Wenn Sie react-redux schon einmal verwendet haben, sollte er Ihnen bekannt vorkommen.

Erstellen Sie zunächst die context-Instanz:

import React from 'react';
import ReactDOM from 'react-dom';

// 创建context实例
const ThemeContext = React.createContext({
  background: 'red',
  color: 'white'
});

Definieren Sie dann die App-Komponente. Beachten Sie, dass hier die Provider-Komponente verwendet wird, ähnlich wie die react-redux Bestandteil von Provider.

class App extends React.Component {

  render () {
    return (
      <ThemeContext.Provider value={{background: &#39;green&#39;, color: &#39;white&#39;}}>
        <Header />
       </ThemeContext.Provider>
    );
  }
}

Als nächstes definieren Sie die Komponenten Header und Title. Hinweis: Die

1. Title-Komponente verwendet die Consumer-Komponente, was bedeutet, dass sie die von Provider übergebenen Daten verbrauchen möchte. Die

2. Title-Komponente ist die App-Komponente von 孙, die Header-Verbrauchsdaten werden jedoch übersprungen.

class Header extends React.Component {
  render () {
    return (
      <Title>Hello React Context API</Title>
    );
  }
}

class Title extends React.Component {
  render () {
    return (
      <ThemeContext.Consumer>
        {context => (
          <h1 style={{background: context.background, color: context.color}}>
            {this.props.children}
          </h1>
        )}
      </ThemeContext.Consumer>
    );
  }
}

Endlich der normale Betrieb

ReactDOM.render(
  <App />, 
  document.getElementById('container')
);

Sehen Sie sich die Ergebnisse der Programmausführung an:

Warum gibt es eine neue Kontext-API?

Studenten, die redux + react-redux verwendet haben, dürften mit der neuen Kontext-API sehr vertraut sein. Studierende, die den Quellcode von react-redux gelesen haben, wissen, dass react-redux selbst auf der Grundlage der alten Version der Kontext-API implementiert ist.

Warum gibt es eine neue Kontext-API, da es bereits Lösungen gibt?

1. Es gibt bestimmte Probleme bei der Implementierung der vorhandenen Kontext-API: Wenn beispielsweise die shouldComponentUpdate Leistung der übergeordneten Komponente optimiert ist, kann dies dazu führen, dass die untergeordneten Komponenten, die Kontextdaten nutzen, dies nicht tun aktualisiert werden.

2. Reduzierung der Komplexität: Lösungen wie Redux Family Bucket führen zu einem gewissen Grad an Komplexität in das Projekt, insbesondere Studenten, die nicht genug über die Lösung wissen, können Probleme möglicherweise nicht lösen. Die Einführung der neuen Kontext-API kann die Abhängigkeit vieler Projekte vom Redux-Familien-Bucket bis zu einem gewissen Grad verringern.

Hinten geschrieben

Die neue Kontext-API, ich persönlich freue mich auf die Leistungsverbesserung. Was die Reduzierung der Komplexität und den Ersatz von Redux angeht, liegt mein Fokus nicht darauf. Der nächste Plan besteht darin, Vergleichstests mit mehreren Anwendungsfällen für Konstruktionspunkte durchzuführen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Kontext-API von React 16.3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!