Analyse des nouvelles fonctionnalités de React 16.3

L'API contextuelle est toujours déroutante. Cette API est officielle, mais le responsable ne souhaite pas que les développeurs utilisent cette API, affirmant que cette API changera à l'avenir. Le moment est venu de procéder à ce changement. La nouvelle API a été fusionnée. Et cela semble plus "convivial". Surtout lorsque vous devez utiliser Redux ou Mobx, vous pouvez choisir la nouvelle API Context pour simplifier la gestion de l'état.

La nouvelle API est très simple à utiliser : React.createContext(), créant ainsi deux composants :

import {createContext} from 'react';

const ThemeContext = createContext({
  background: 'yellow',
  color: 'white'
});

L'appel de la méthode createContext renverra deux objets, l'un est Provider, l'un est Consumer.

Ce Provider est un composant spécial. Il peut être utilisé pour fournir des données aux composants d'un sous-arbre. Un exemple :

class Application extends React.Component {
  render() {
    <ThemeContext.Provider value={{background: &#39;black&#39;, color: &#39;white&#39;}}>
      <Header />
      <Main />
      <Footer />
    </ThemeContext.Provider>
  }
}

L'exemple ci-dessus montre comment passer le contexte "thème". Bien entendu, ces valeurs peuvent être dynamiques (par exemple basées sur this.state).

L'étape suivante consiste à utiliser Consumer.

const Header = () => {
  <ThemeContext.Consumer>
    {(context) => {
      return (
        <p style={{background: context.background, color: context.color}}>
          Welcome!
        </p>
      );
    }}
  </ThemeContext.Consumer>
}

s'il n'est pas imbriqué dans un Consumer lors du rendu Provider. Ensuite, la valeur par défaut définie lors de l'appel de la méthode createContext sera utilisée.

Remarque :

• Le consommateur doit avoir accès au même composant Context. Si vous souhaitez créer un nouveau contexte et utiliser les mêmes paramètres d'entrée, les données de ce nouveau contexte ne seront pas accessibles. Par conséquent, Context peut être considéré comme un composant. Il peut être créé une fois, puis exporté et importé.

• Cette nouvelle syntaxe utilise la fonction comme mode enfant (parfois également appelé mode render prop). Si vous n’êtes pas très familier avec ce modèle, je vous recommande de lire ces articles.

• La nouvelle API ne vous oblige plus à déclarer contextProps. Les données transmises par

Context sont les mêmes que l'attribut Context.Provider du composant value. Les modifications apportées aux données Provider entraîneront un redessinage de tous les consommateurs.

Nouvelle méthode de cycle de vie

Référez-vous à cette RFC. De nouvelles méthodes de cycle de vie seront introduites et les anciennes seront obsolètes.

Ce changement vise principalement à appliquer les meilleures pratiques. Vous pouvez consulter cet article pour comprendre pourquoi ces méthodes de cycle de vie peuvent devenir étranges. Ces meilleurs modes sont très importants dans le mode de dessin asynchrone de React 16 (Async Mode).

Méthodes à déconseiller :

• componentWillMount--Utilisez componentDidMount au lieu de

• componentWillUpdate- -Utilisez componentDidUpdate au lieu de

• componentWillReceiveProps--Utilisez une nouvelle méthode : static getDerivedStateFromProps à la place.

Mais cela n’arrivera pas immédiatement, ils peuvent utiliser React 16.4. Il sera complètement supprimé dans React 17. Si vous activez StrictMode ou AsyncMode, vous pouvez l'utiliser de cette manière, mais vous recevrez un avertissement :

• UNSAFE_componentWillMount

• UNSAFE_componentWillReceiveProps

• UNSAFE_componentWillUpdate

static getDerivedStateFromProps

QuandcomponentWillReceiveProps nous avons besoin d'un autre moyen état en fonction des changements dans les accessoires. La communauté a décidé d'introduire une nouvelle méthode statique pour résoudre ce problème.

Qu'est-ce qu'une méthode statique ? Une méthode statique est une méthode qui existe au sein de la classe, et non dans une instance de la classe. Les méthodes statiques ne peuvent pas accéder à this, et elles sont décorées du mot-clé static devant lorsqu'elles sont déclarées.

Mais voici le problème. Puisque cette méthode n'a aucun moyen d'accéder à this, comment appeler this.setState ? La réponse est : n'appelle pas . Cette méthode renvoie directement les données d'état qui doivent être mises à jour, ou renvoie null s'il n'y a rien à mettre à jour.

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.currentRow === prevState.lastRow) {
    return null;
  }

  return {
    lastRow: nextProps.currentRow,
    isCrollingDown: nextProps.curentRow > prevState.lastRow
  }
}

Appeler cette méthode a le même effet que d'appeler this.setState auparavant. Seules ces valeurs renvoyées seront modifiées. Si elles sont nulles, l'état ne sera pas modifié. Toutes les autres valeurs d'état seront conservées.

Choses à noter

Vous devez définir la valeur de l'état initial. Que ce soit en constructor ou dans un attribut de classe. Sinon, un avertissement sera signalé.

Cette méthode getDerivedStateFromProps() sera appelée lors du premier montage et redessinage, vous n'avez donc fondamentalement pas besoin de setState en fonction des accessoires entrants dans le constructeur.

Si getDerivedStateFromProps est défini, alors componentWillReceiveProps est défini. Ensuite, seuls les premiers seront appelés et vous recevrez un avertissement.

En général, vous utiliserez un rappel pour vous assurer que certains codes ne sont pas appelés tant que l'état n'est pas mis à jour. Ensuite, veuillez déplacer tous ces codes dans componentDidUpdate.

Si vous n'aimez pas utiliser le mot-clé static, vous pouvez le faire :

ComponentName.getDerivedStateFromProps = (nextProps, prevState) => {
  // Your code here
}

Static Mode

严格模式是一个新的方式来确保你的代码是按照最佳实践开发的。它实际是一个在React.StrictMode下的组件。它可以用在你的组件树的任何一部分上。

import {StrictMode} from 'react'

class Application extends React.Component {
  render() {
    return (
      <StrictMode>
        <Context.Provider value={{background: &#39;black&#39;, color: &#39;white&#39;}}>
          <Header />
          <Main />
          <Footer />
        </Context.Provider>
      </StrictMode>
    );
  }
}

如果一个在StricMode子树里的组件使用了componentWillMount方法，那么你会看到一个报错消息。

AsyncMode

异步模式在React.unsafe_AsyncMode下。使用AsncMode也会打开StrictMode模式下的警告。

相关推荐：

React 16.3之Context API详解

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!