React v16.6.0 : lazy, memo et contextType

Nous publions aujourd’hui React 16.6 avec quelques nouvelles fonctionnalités pratiques. Une forme de PureComponent / shouldComponentUpdate pour les fonctions composants, un moyen de découper le code à l’aide de Suspense et un moyen plus simple d’utiliser Context à partir des composants à base de classes.

Découvrez le changelog complet plus bas.

React.memo

Les composants à base de classes peuvent éviter le rendu lorsque les valeurs de leurs props sont les mêmes en utilisant PureComponent ou shouldComponentUpdate. Désormais, vous pouvez faire la même chose avec les fonctions composants en les enrobant avec React.memo.

const MyComponent = React.memo(function MyComponent(props) {
  /* le rendu ne se fait que lorsque les props changent */
});

React.lazy : la découpe de code avec Suspense

Vous avez peut-être vu la présentation de Dan sur React Suspense à JSConf Iceland. Vous pouvez maintenant utiliser le composant Suspense pour faire de la découpe de code en enrobant une importation dynamique avec un appel à React.lazy().

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Chargement…</div>}>
      <OtherComponent />
    </Suspense>
  );
}

Le composant Suspense permettra également aux auteur·e·s de bibliothèques de commencer à construire de la récupération de données prenant en charge Suspense à l’avenir.

Note : cette fonctionnalité n’est pas encore disponible pour le rendu côté serveur. La prise en charge de Suspense sera ajoutée dans une version ultérieure.

static contextType

Dans React 16.3 nous avons introduit l’API de Contexte en remplacement de la précédente API Legacy Context.

const MyContext = React.createContext();

Nous avons reçu des commentaires selon lesquels l’adoption de la nouvelle API à base de props de rendu peut s’avérer difficile dans les composants à base de classes. Nous avons donc ajouté une API de confort pour consommer une valeur de contexte depuis un composant à base de classe.

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* réaliser un effet secondaire lors du montage en utilisant la valeur de MyContext */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* afficher quelque chose basé sur la valeur de MyContext */
  }
}

static getDerivedStateFromError()

React 16 a introduit les Périmètres d’erreurs pour gérer les erreurs lancées au sein des rendus React. Nous avions déjà la méthode de cycle de vie componentDidCatch qui est déclenchée après une erreur. C’est formidable pour la journalisation des erreurs sur le serveur. Ça vous permet également d’afficher une interface utilisateur différente pour l’utilisateur en appelant setState.

Avant de la déclencher, nous faisons le rendu de null à la place de l’arbre qui a généré une erreur. Ça casse parfois les composants parents qui ne s’attendent pas à ce que leurs refs soient vides. La récupération des erreurs sur le serveur ne fonctionne pas non plus, puisque les méthodes du cycle de vie Did ne sont pas déclenchées lors du rendu côté serveur.

Nous ajoutons une autre méthode d’erreur qui vous permet de produire une interface utilisateur de secours avant la fin du rendu. Consultez la documentation de getDerivedStateFromError().

Note : getDerivedStateFromError() n’est pas encore disponible pour le rendu côté serveur. Elle est conçue pour fonctionner avec le rendu côté serveur dans une version ultérieure. Nous la publions tôt pour que vous puissiez commencer à vous préparer à l’utiliser.

Dépréciations en StrictMode

La version 16.3 a introduit le composant StrictMode. Il vous permet d’activer des alertes précoces pour les approches susceptibles de poser problème à l’avenir.

Nous avons ajouté deux API supplémentaires à la liste des API obsolètes en StrictMode. Si vous n’utilisez pas StrictMode vous n’avez pas à vous inquiéter ; ces avertissements ne se déclencheront pas pour vous.

• ReactDOM.findDOMNode() - Cette API est souvent mal comprise et la plupart des utilisations de celle-ci sont inutiles. Elle peut aussi être étonnamment lente dans React 16. Consultez les docs pour les mécanismes de mise à niveau possibles.
• Legacy Context en utilisant contextTypes et getChildContext - Le Legacy Context rend React légèrement plus lent et plus gros que nécessaire. C’est pourquoi nous souhaitons vivement encourager la mise à niveau vers la nouvelle API de Contexte. Espérons que l’ajout de l’API contextType rendra ça un peu plus facile.

Si vous rencontrez des difficultés pour effectuer la mise à niveau, nous aimerions connaître votre avis.

Installation

React v16.6.0 est disponible sur npm.

Pour installer React 16 avec Yarn, exécutez :

yarn add react@^16.6.0 react-dom@^16.6.0

Pour installer React 16 avec npm, exécutez :

npm install --save react@^16.6.0 react-dom@^16.6.0

Nous fournissons également des versions UMD de React via un CDN:

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Reportez-vous à la documentation pour les instructions d’installation détaillées.

Changelog

React

• Ajouter React.memo() comme alternative à PureComponent pour les fonctions. (@acdlite dans #13748)
• Ajouter React.lazy() pour la découpe de code les composants. (@acdlite dans #13885)
• React.StrictMode avertit désormais du recours à l’API Legacy Context (@bvaughn dans #13760)
• React.StrictMode avertit désormais du recours à findDOMNode. (@sebmarkbage dans #13841)
• Renommer unstable_AsyncMode en unstable_ConcurrentMode. (@trueadm dans #13732)
• Renommer unstable_Placeholder en Suspense, et delayMs en maxDuration. (@gaearon dans #13799 et @sebmarkbage dans #13922)

React DOM

• Ajouter contextType comme moyen plus ergonomique de s’abonner au Contexte depuis une classe (@bvaughn dans #13728)
• Ajouter la méthode de cycle de vie getDerivedStateFromError pour détecter les erreurs à l’avenir lors du rendu asynchrone côté serveur. (@bvaughn dans #13746)
• Avertir quand <Context> est utilisé à la place de <Context.Consumer>. (@trueadm dans #13829)
• Correction du calque gris sur iOS Safari. (@philipp-spiess dans #13778)
• Corrige un bug causé par un écrasement de window.event en développement. (@sergei-startsev dans #13697)

React DOM Server

• Ajouter la prise en charge de React.memo(). (@alexmckenley dans #13855)
• Ajouter la prise en charge de contextType. (@alexmckenley et @sebmarkbage dans #13889)

Planificateur (expérimental)

• Renommer le module en scheduler. (@gaearon dans #13683)
• Prise en charge des niveaux de priorité, des continuations et des rappels encapsulés. (@acdlite dans #13720 et #13842)
• Améliorer le mécanisme de secours dans les environnements non-DOM. (@acdlite dans #13740)
• Planifier requestAnimationFrame plus tôt. (@acdlite dans #13785)
• Correction de la détection du DOM pour qu’elle soit plus complète. (@trueadm dans #13731)
• Correction de bugs avec le traçage d’interaction. (@bvaughn dans #13590)
• Ajouter la transformée envify au module. (@mridgway dans #13766)