Black Lives Matter. Soutenez la Equal Justice Initiative.
React
v16.13.1 LanguesGitHub

React v15.5.0

7 avril 2017 par Andrew Clark

Ça fait exactement un an depuis le dernier changement de version majeure de React. Notre prochaine version majeure, React 16, comprendra des améliorations passionnantes, dont une réécriture complète des mécanismes internes de React. Nous prenons la stabilité au sérieux, et nous engageons à apporter ces améliorations à tous nos utilisateurs sans qu’ils aient trop d’efforts à fournir.

C’est pourquoi nous publions aujourd’hui React 15.5.0.

Nouveaux avertissements de dépréciation

Le changement le plus important d’abord : nous avons extrait React.PropTypes et React.createClass dans leurs propres modules. Les deux sont encore accessibles via l’objet principal React, mais l’utilisation de l’un ou l’autre produira un avertissement d’obsolescence dans la console en mode développement. Ça permettra d’optimiser la taille du code à l’avenir.

Ces avertissements n’affecteront pas le comportement de votre application. Cependant, nous sommes conscients qu’ils peuvent causer des frustrations, en particulier si vous utilisez un framework de test qui traite console.error comme un échec.

Nous n’ajoutons pas de nouveaux avertissements à la légère. Les avertissements dans React ne sont pas de simples suggestions—ils font partie intégrante de notre stratégie visant à garder le plus de personnes possible sur la dernière version de React. Nous n’ajoutons jamais d’avertissements sans fournir un mécanisme incrémentiel de mise à niveau.

Ainsi, bien que les avertissements puissent causer de la frustration à court terme, nous croyons que le fait d’inciter les développeurs à migrer leurs bases de code maintenant évite une plus grande frustration par la suite. La correction proactive des avertissements vous assure d’être prêt·e pour la prochaine version majeure. Si votre application ne produit aucun avertissement en 15.5, elle devrait continuer à fonctionner en 16 sans aucun changement supplémentaire.

Pour chacune de ces nouvelles dépréciations, nous avons fourni un codemod pour migrer automatiquement votre code. Ils sont disponibles au sein du projet react-codemod.

Cesser d’utiliser React.PropTypes

Les Prop Types permettent la validation des props des composants à l’exécution durant la phase de développement. Nous avons extrait les validateurs prédéfinis pour les placer dans un module séparé car tout le monde ne les utilise pas forcément.

En 15.5, au lieu d’accéder à PropTypes depuis l’objet principal React, installez le module prop-types et importez-les de là :

// Avant (15.4 et versions précédentes)
import React from 'react';

class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: React.PropTypes.string.isRequired,}

// Après (15.5)
import React from 'react';
import PropTypes from 'prop-types';
class Component extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Component.propTypes = {
  text: PropTypes.string.isRequired,};

Le codemod pour cette modification effectue cette conversion automatiquement. Voici un exemple de son utilisation de base :

jscodeshift -t react-codemod/transforms/React-PropTypes-to-prop-types.js <path>

Les API propTypes, contextTypes et childContextTypes fonctionneront exactement comme avant. Le seul changement réside dans le déplacement des validateurs intégrés vers un module séparé.

Vous pouvez également utiliser Flow pour vérifier statiquement votre code JavaScript, y compris les composants React.

Cesser d’utiliser React.createClass

Quand React a été initialement publié, il n’y avait pas de moyen idiomatique de créer des classes en JavaScript, nous avons donc fourni le nôtre : React.createClass.

Plus tard, des classes ont été ajoutées au langage dans le cadre de ES2015, nous avons donc ajouté la possibilité de créer des composants React en utilisant des classes JavaScript. Avec les fonctions composants, les classes JavaScript sont désormais la façon recommandée de créer des composants en React.

Pour vos composants createClass existants, nous vous recommandons de les migrer vers des classes JavaScript. Cependant, si vous avez des composants qui utilisent des mixins, la conversion en classes peut ne pas être immédiatement réalisable. Pour ce genre de cas, create-react-class est disponible sur npm afin de préserver cette fonctionnalité :

// Avant (15.4 et précédentes)
var React = require('react');

var Component = React.createClass({  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

// Après (15.5)
var React = require('react');
var createReactClass = require('create-react-class');
var Component = createReactClass({  mixins: [MixinA],
  render() {
    return <Child />;
  }
});

Vos composants continueront à fonctionner de la même manière qu’auparavant.

Le codemod pour ce changement tente de convertir un composant createClass en une classe JavaScript, avec un repli vers create-react-class si nécessaire. Il a converti des milliers de composants en interne sur Facebook.

Utilisation de base :

jscodeshift -t react-codemod/transforms/class.js path/to/components

Arrêt de la prise en charge des Addons React

Nous cessons de maintenir activement les modules React Addons. En vérité, la plupart de ces paquets n’étaient plus activement maintenus depuis longtemps. Ils continueront à fonctionner, mais nous vous recommandons de migrer le plus tôt possible afin d’éviter de futures cassures.

  • react-addons-create-fragment - Les fragments feront partie intégrante de React 16, à partir de quoi ce module ne sera plus nécessaire. Nous recommandons d’utiliser plutôt des tableaux d’éléments avec des clés.
  • react-addons-css-transition-group - Utilisez plutôt react-transition-group/CSSTransitionGroup. La version 1.1.1 offre un remplacement facile.
  • react-addons-linked-state-mixin - Définissez plutôt explicitement les props de value et de gestionnaire onChange.
  • react-addons-pure-render-mixin - Utilisez plutôt React.PureComponent.
  • react-addons-shallow-compare - Utilisez plutôt React.PureComponent.
  • react-addons-transition-group - Utilisez plutôt react-transition-group/TransitionGroup. La version 1.1.1 offre un remplacement facile.
  • react-addons-update - Utilisez plutôt immutability-helper, qui offre un remplacement facile.
  • react-linked-input - Définissez plutôt explicitement value et le gestionnaire onChange.

Nous cessons également de prendre en charge la version UMD de react-with-addons. Elle sera retirée de React 16.

Les utilitaires de test de React

Actuellement, les utilitaires de test de React sont mis à disposition par react-addons-test-utils. À partir de la version 15.5, nous déprécions ce module et les déplaçons dans react-dom/test-utils :

// Avant (15.4 et précédentes)
import TestUtils from 'react-addons-test-utils';

// Après (15.5)
import TestUtils from 'react-dom/test-utils';

Ça montre que ce que nous appelons les utilitaires de test sont en réalité un ensemble d’API qui enrobent le moteur de rendu DOM.

Le rendu superficiel constitue une exception, car il n’est pas spécifique au DOM. Le moteur de rendu superficiel a été déplacé vers react-test-renderer/shallow.

// Avant (15.4 et précédentes)
import { createRenderer } from 'react-addons-test-utils';
// Après (15.5)
import { createRenderer } from 'react-test-renderer/shallow';

Remerciements

Nous aimerions adresser un remerciement spécial à ces quelques personnes pour le transfert de propriété des noms de modules npm :

Installation

Nous conseillons d’utiliser Yarn ou npm pour gérer les dépendances front-end. Si vous débutez avec les gestionnaires de paquets, la documentation de Yarn constitue un bon endroit pour commencer.

Pour installer React avec Yarn, exécutez :

yarn add react@^15.5.0 react-dom@^15.5.0

Pour installer React avec npm, exécutez :

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

Nous vous conseillons par ailleurs d’utiliser un bundler comme webpack ou Browserify afin de pouvoir écrire du code modulaire et le regrouper en petits paquets pour optimiser le temps de chargement.

Souvenez-vous que par défaut, React exécute des vérifications supplémentaires et fournit des avertissements utiles en mode développement. Lorsque vous déployez votre application, assurez-vous de la compiler en mode production.

Si vous n’utilisez pas de bundler, nous fournissons également des bundles pré-construits dans les paquets npm que vous pouvez inclure via des balises de script sur votre page :

Nous avons également publié la version 15.5.0 des modules react, react-dom et addons sur npm et le paquet react sur bower.

Changelog

15.5.0 (7 avril 2017)

React

  • Ajout d’un avertissement de dépréciation pour React.createClass. Oriente désormais les utilisateurs vers create-react-class. (@acdlite dans d9a4fa4)
  • Ajout d’un avertissement de dépréciation pour React.PropTypes. Oriente désormais les utilisateurs vers prop-types. (@acdlite dans 043845c)
  • Correction d’un problème lors de l’utilisation de ReactDOM avec ReactDOMServer. (@wacii dans #9005)
  • Correction d’un problème avec le compilateur Closure. (@anmonteiro dans #8895)
  • Une autre correction pour le compilateur Closure. (@Shastel dans #8882)
  • Ajout d’informations de pile de composants pour l’avertissement de type d’élément invalide. (@n3tr dans #8495)

React DOM

  • Correction d’un bug Chrome lors de l’effacement arrière dans les champs de saisie numérique. (@nhunzaker dans #7359)
  • Ajout de react-dom/test-utils, qui exporte les utilitaires de test de React. (@bvaughn)

React Test Renderer

  • Correction d’un bug où componentWillUnmount n’était pas appelé pour les enfants (@gre dans #8512)
  • Ajout de react-test-renderer/shallow, qui exporte le moteur de rendu superficiel. (@bvaughn)

React Addons

  • Dernière version pour les addons ; ils ne seront plus activement maintenus.
  • Suppression de peerDependencies pour que les addons continuent à fonctionner indéfiniment. (@acdlite et @bvaughn dans 8a06cd7 dans 67a8db3)
  • Mise à jour pour supprimer les références à React.createClass et React.PropTypes (@acdlite dans 12a96b9)
  • react-addons-test-utils est obsolète. Utilisation de react-dom/test-utils et react-test-renderer/shallow à la place. (@bvaughn)
Avez-vous trouvé cette page utile ?Modifier cette page