Nouveautés de la bibliothèque d'interface utilisateur JavaScript React

Désormais disponible dans la version de production, la version 16.8 de la bibliothèque d'interface utilisateur JavaScript React a la capacité de hooks, pour utiliser l'état et d'autres fonctionnalités React sans avoir à écrire une classe.

Où télécharger React

Vous pouvez télécharger la version produit de React depuis GitHub.

Version actuelle: Nouvelles fonctionnalités de React 16.8

Sorti en février 2019, React 168 fournit une implémentation de hooks pour le DOM de React, le serveur DOM, le moteur de rendu de test et le moteur de rendu peu profond. Les hooks sont pris en charge dans React DevTools. Les développeurs peuvent créer leurs propres hooks pour partager une logique avec état réutilisable entre les composants. Mais Facebook conseille aux développeurs de prendre leur temps avec cette fonctionnalité, ne recommandant pas aux développeurs de réécrire les applications pour utiliser des hooks «du jour au lendemain».

Il n'est pas prévu de supprimer des classes de React, les développeurs devraient donc essayer des hooks dans certains nouveaux composants. Le code utilisant des hooks d'exploitation fonctionnera avec le code existant utilisant des classes.

Version précédente: Nouvelles fonctionnalités de React 16.7

Sorti en décembre 2018, React 16.7 ajoute la capacité de hooks, pour utiliser l'état et d'autres fonctionnalités React sans écrire de classe.

Les hooks sont des fonctions liées à l'état React et aux fonctionnalités du cycle de vie des composants de fonction. Ils fonctionnent actuellement côte à côte avec le code existant, ce qui permet une adoption progressive. Il n'est pas prévu de supprimer réellement les classes de React. Les hooks résolvent divers problèmes dans React, notamment:

  • L'absence de moyen d'attacher un comportement réutilisable à un composant. Il existe des modèles tels que des accessoires de rendu et des composants d'ordre supérieur qui tentent de résoudre ce problème, mais ceux-ci nécessitent une restructuration des composants, ce qui peut être fastidieux et rendre plus difficile le suivi du code. À l'aide de hooks, les développeurs peuvent extraire la logique avec état d'un composant pour des tests indépendants et une réutilisation.
  • Les composants complexes sont devenus trop difficiles à comprendre. Avec les hooks, les composants peuvent être divisés en fonctions plus petites en fonction d'éléments connexes, tels que la configuration d'un abonnement ou la récupération de données. Ceci est fait au lieu de forcer une scission basée sur des méthodes de cycle de vie.
  • Les cours peuvent confondre les personnes et les machines et sont considérés comme le plus grand obstacle à l'apprentissage de React. Les hooks permettent aux développeurs d'utiliser plus de fonctionnalités de React sans classes. Les Hooks embrassent les fonctions, mais sans sacrifier l'esprit de React. L'accès est fourni aux trappes d'évacuation impératives. Les développeurs n'ont pas à apprendre des techniques de programmation fonctionnelle ou réactive complexes.

Version précédente: Nouvelles fonctionnalités de React 16.6

Sorti en octobre 2018, React 16.6 fournit plusieurs améliorations.

  • Avec memo, les développeurs peuvent renoncer au rendu avec des composants de fonction, de la même manière que les composants de classe peuvent renoncer au rendu lorsque les accessoires d'entrée sont les mêmes en utilisant PureComponentsou shouldComponentUpdate.
  • Avec lazy, les développeurs peuvent utiliser le Suspensecomposant pour le fractionnement de code en encapsulant une importation dynamique dans l'appel à React.lazy(). Remarque: la fonctionnalité n'est pas encore disponible pour le rendu côté serveur.
  • L'API de commodité a été introduite pour consommer une valeur de contexte à partir d'un composant de classe. Les développeurs s'étaient plaints que l'adoption de la nouvelle API de prop de rendu de React 16.3 pouvait être difficile dans les composants de classe.
  • Une méthode d'erreur,, getDerivedStatefromError()rend l'interface utilisateur de secours avant la fin d'un rendu. Remarque: il n'est pas encore disponible pour le rendu côté serveur, mais les développeurs peuvent commencer à s'y préparer.
  • Deux StrictmodeAPI sont obsolètes: findDOMNode()et l'ancien contexte utilisant contextType et getChildContext. Les développeurs sont encouragés à passer à la nouvelle contextTypeAPI.

Version précédente: Nouvelles fonctionnalités de React 16.4

La version 16.4 de React, publiée fin mai 2018, ajoute la prise en charge des événements de pointeur, une fonctionnalité souvent demandée, ainsi qu'une amélioration pour une capacité de rendu asynchrone à venir. Les navigateurs qui prennent en charge les événements de pointeur incluent les versions de Google Chrome, Mozilla Firefox, Microsoft Edge et Microsoft Internet Explorer.

Les événements de pointeur sont des événements DOM déclenchés pour un périphérique de pointage, conçus pour fournir un modèle d'événement unique pour gérer des périphériques tels qu'une souris ou un toucher.

Avec la prise en charge des événements de pointeur, React ajoute la prise en charge des types d'événements qui incluent:

  • onPointerDow
  • onPointerMove
  • onPointerUp
  • onPointerCancel
  • onGotPointerCapture
  • onLostPointerCapture
  • onPointerEnter
  • onPointerLeave
  • onPointerOver
  • onPointerOut

Les autres nouvelles fonctionnalités de React 16.4 incluent:

  • Amélioration de la compatibilité avec un mode de rendu asynchrone prévu. Pour ce faire, la version propose un correctif de bogue pour getDerivedStatefromProps, qui est désormais appelé à chaque fois qu'un composant est nécessaire, quelle que soit la raison de la mise à jour. Il n'avait été appelé que si un composant était renvoyé par un parent et ne se déclencherait pas à la suite d'un local setState. Le correctif n'affecte pas la plupart des applications mais, dans de rares cas, peut causer des problèmes avec un petit nombre de composants.
  • Un composant de profileur expérimental a été ajouté, appelé unstable_Profiler, pour mesurer les performances.
  • Un réconciliateur expérimental, pour créer des moteurs de rendu personnalisés, présente une nouvelle forme de configuration hôte qui est plate et n'utilise pas d'objets imbriqués.
  • Les corrections apportées au DOM React incluent la réparation d'un bogue qui empêchait la propagation du contexte dans certains cas, ainsi qu'une situation dans laquelle certains attributs étaient supprimés de manière incorrecte des nœuds d'élément personnalisés.

La capacité de retour d'appel expérimental a été supprimée dans React version 16.4 car elle affectait la taille du bundle et l'API n'était pas assez bonne. Attendez-vous à ce qu'il revienne à un moment donné sous une autre forme, dit Facebook.

Version précédente: Nouvelles fonctionnalités de React 16.3

La version 16.3 de mars 2018 de React apporte des changements de cycle de vie ainsi qu'une API pour le contexte.

Changements du cycle de vie dans React 16.3

Pour le cycle de vie du composant, le prochain mode de rendu asynchrone étend le modèle d'API du composant de classe, qui est utilisé d'une manière qui n'était pas prévue à l'origine. Ainsi, de nouveaux cycles de vie sont ajoutés, y compris getDerivedStateFromProps, comme une alternative plus sûre au cycle de vie de l' héritage, componentWillReceiveProps. Il a également été ajouté getSnapshotBeforeUpdatepour prendre en charge la lecture sécurisée des propriétés, comme le DOM avant que les mises à jour ne soient effectuées.

React 16.3 ajoute également le préfixe «unsafe» à certains de ces cycles de vie, tels que to componentWillMountet componentWillReceiveUpdate. Dans ces cas, «unsafe» ne fait pas référence à la sécurité mais au fait que le code utilisant ces cycles de vie est plus susceptible d'avoir des bogues dans les futures versions de React.

Avec la version React 16.3, les développeurs n'ont rien à faire sur les méthodes héritées. La version est destinée à inviter les responsables de projets open source à mettre à jour leurs bibliothèques avant les avertissements d'obsolescence, qui ne seront pas activés avant une prochaine version de la ligne 16.x.

La version 16.3 ajoute le StrictModecomposant, qui identifie les composants avec des cycles de vie dangereux. StrictMode, qui s'exécute uniquement en mode développement, avertit également de l'utilisation de l'API de référence de chaîne héritée et détecte les effets secondaires inattendus. Il active des contrôles supplémentaires pour les descendants. Plus de fonctionnalités seront ajoutées plus tard.

L'API de contexte prend en charge la vérification de type statique et les mises à jour approfondies

La nouvelle API de contexte prend en charge la vérification de type statique et les mises à jour approfondies. Cette API est également plus efficace que la version expérimentale de l'API précédente, a déclaré Brian Vaughn, membre de l'équipe principale de React JS sur Facebook. Le contexte permet de transmettre les données à travers une arborescence de composants sans avoir besoin de passer manuellement les accessoires, dont certains incluent la préférence locale et le thème de l'interface utilisateur. L'ancienne API continuera à fonctionner pour les versions de React 16.x, laissant aux utilisateurs le temps de migrer.

Aussi nouveau dans React 16.3:

  • Une API améliorée, appelée createrefAPI, pour la gestion des refs, qui fournit un moyen d'accéder aux nœuds DOM ou aux éléments React développés dans la méthode de rendu.
  • L' forwardRefAPI, qui aide à l'utilisation de composants d'ordre supérieur qui favorisent la réutilisation du code.

Version précédente: Nouvelles fonctionnalités de React 16.2

La version de novembre 2017 de React 16.2 apporte la capacité des fragments d'améliorer la prise en charge de l'affichage de plusieurs enfants à partir d'une méthode de rendu de composant. Les fragments, qui ressemblent à des balises JSX vides, permettent aux développeurs de regrouper une liste d'enfants sans ajouter de nœuds au DOM.

Vous pouvez installer la version 16.2 à partir du registre NPM. Pour installer avec le gestionnaire de packages Yarn, exécutez yarn add [email protected]^16.2.0 [email protected]^16.2.0. Pour l'installer avec NPM, exécutez npm install --save [email protected]^16.2.0 [email protected]^16.2.0.

Version précédente: Nouvelles fonctionnalités de React 16.0

Baptisé «React Fiber» lors de son développement, le React 16.0 de septembre 2017 est une réécriture du cœur de React, améliorant la réactivité perçue pour les applications complexes via un nouvel algorithme de réconciliation. Les principales caractéristiques de React 16 incluent:

  • Erreurs qui comportent une trace de pile de composants pour faciliter leur débogage.
  • Retour de chaînes / tableaux directement à partir des méthodes de rendu des composants.
  • Un nouveau moteur de rendu côté serveur en streaming plus rapide.
  • Plus de performances des applications natives.
  • Le passage de la licence controversée BSD + Patents à la licence MIT plus acceptable.

Bien que les composants internes de React aient été complètement réécrits dans React 16, l'API publique est «essentiellement inchangée», a déclaré Sophie Alpert, responsable de l'ingénierie de Facebook pour React. L'intention était d'éviter aux développeurs d'avoir à réécrire les composants existants construits avec React.

Le nouveau code de React 16 a été écrit avec l'ancien code dans le référentiel GitHub, selon une pratique familière sur Facebook. Les commutations entre les deux ont été effectuées avec l' useFiberindicateur de fonction booléenne . Le processus a permis à Facebook de commencer à construire sa nouvelle implémentation sans affecter les utilisateurs existants et de continuer à apporter des corrections de bogues à l'ancienne base de code.

Après quelques mois de correction des bogues, Facebook a choisi de livrer un seul produit pour réduire l'éventuel ensemble de bogues, plutôt que de garder deux versions de React à jour.