Explication détaillée de l'API contextuelle de React 16.3

React a introduit une nouvelle API Contexte en version 16.3-alpha, et la communauté l'attend avec impatience. Utilisons d'abord un exemple simple pour voir à quoi ressemble la nouvelle API Contexte, puis discutons brièvement de la signification de la nouvelle API.

Vous devez installer la version 16.3-alpha de React. Les étapes de construction ne sont pas au centre de cet article. Cet article partage principalement avec vous l'explication détaillée de l'API Context de React 16.3. J'espère qu'elle pourra vous aider.

npm install react@next react-dom@next

Regardons directement le code Si vous avez déjà utilisé react-redux, il devrait vous sembler familier.

Tout d'abord, créez l'instance context :

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

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

Ensuite, définissez le composant App Notez que le composant Provider est utilisé ici, similaire au react-redux. composant de Provider.

class App extends React.Component {

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

Ensuite, définissez les composants Header et Title. Remarque : Le composant

1. Title utilise le composant Consumer, ce qui signifie qu'il souhaite consommer les données transmises par Provider. Le composant

2. Title est le composant App de 孙, mais les données de consommation Header sont ignorées.

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>
    );
  }
}

Enfin, le fonctionnement normal

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

Regardez les résultats du programme en cours d'exécution :

Pourquoi y a-t-il une nouvelle API Context

Les étudiants qui ont utilisé redux + react-redux devraient trouver la nouvelle API Context très familière. Les étudiants qui ont lu le code source de react-redux sauront que react-redux lui-même est implémenté sur la base de l'ancienne version de l'API Context.

Puisqu’il existe déjà des solutions, pourquoi y a-t-il une nouvelle API Context ?

1. Il existe certains problèmes dans la mise en œuvre de l'API Context existante : par exemple, lorsque les performances shouldComponentUpdate du composant parent sont optimisées, les composants enfants qui consomment les données de contexte peuvent ne pas à mettre à jour.

2. Réduire la complexité : des solutions telles que Redux Family Bucket introduisent un certain degré de complexité dans le projet, en particulier les étudiants qui ne connaissent pas suffisamment la solution peuvent être incapables de résoudre les problèmes. L'introduction de la nouvelle API Context peut, dans une certaine mesure, réduire la dépendance de nombreux projets à l'égard du bucket de la famille Redux.

Écrit à la fin

La nouvelle API Context, j'attends personnellement avec impatience l'amélioration des performances. Quant à réduire la complexité et remplacer le redux, ce n'est pas mon objectif. Le prochain plan consiste à effectuer des tests comparatifs avec plusieurs cas d’utilisation de points de construction.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!