Nouvelles fonctionnalités de React 16.9.0

Dans cet article, vous découvrirez la dernière version de React.js et toutes les déprécations qui l'accompagnent, ainsi que des informations générales sur l'avenir.

React est l'une des bibliothèques JavaScript les plus populaires autour de vous. , avec plus de 110 000 étoiles et plus de 2 millions d'utilisateurs l'utilisant sur GitHub. Une foule de membres de la communauté dédiés facilitent la vie des développeurs en créant une interface utilisateur incroyable qui a publié la version la plus récente: 16.9.0 (React compte maintenant plus de 100 versions). Il contient plusieurs nouvelles fonctionnalités, corrections de bugs et nouveaux avertissements de dépréciation pour vous aider à préparer une future version majeure. – React Blog

Examinons maintenant ces nouvelles fonctionnalités:

Loi asynchrone ()

Dans la dernière version majeure de React.js, un nouvel utilitaire de test était livré. Elle s'appelle act () et aide les développeurs à écrire des tests qui correspondent mieux aux divers comportements du navigateur.

Un bon exemple est la façon dont plusieurs mises à jour d'état au sein d'un même acte sont traitées par lots, ce qui correspond au comportement React normal pour la gestion des événements du navigateur. Dans React 16.8, la seule prise en charge de l'acte concernait les fonctions synchrones et certains avertissements apparaissaient toujours lors de son utilisation. Mais maintenant, dans cette nouvelle version 16.9, les fonctions asynchrones sont prises en charge, vous pouvez donc attendre les appels d'acte.

 wait act (async () => {// ...}); 

Corrections apportées aux avertissements précédents ont également été inclus dans cette version, de sorte que tous vos avertissements disparaîtront à la mise à jour de votre version de React.

L'équipe de React a également investi du temps dans la création de ressources pour aider les développeurs à comprendre comment écrire des tests avec act () avec le nouveau guide de recettes de tests . Il contient des cas d'utilisation courants et explique comment act () peut être utilisé dans chacun d'eux pour écrire des tests. Les exemples utilisent les API DOM, mais vous pouvez également utiliser la bibliothèque de tests React .

Mesures de performances avec l'API Profiler

L'API Profiler pour DevTools a été initialement fourni dans la version 16.5 React. Cela aide les développeurs à trouver des difficultés dans votre application Web. Dans cette nouvelle version 16.9, l'équipe de React est allée encore plus loin pour améliorer l'API.

Avec le nouveau vous pouvez mesurer vous-même un grand nombre de choses par programmation dans DevTools sur DOM, de la phase aux temps, voire aux durées et aux interactions. Il est idéalement conçu pour les applications plus importantes afin de vérifier en permanence leurs performances et leurs régressions dans le temps. Le profileur est essentiellement un outil de mesure pour les rendus et il identifie les parties de votre application qui sont lentes et devraient bénéficier de la mémorisation.

Un profileur ressemble à ceci:

 (                
      ); 

] Vous pouvez en apprendre plus à leur sujet et aux paramètres transmis lors du rendu ou des rappels ici dans la documentation officielle .

Il est important de noter qu'ils sont désactivés par défaut pour les environnements de production en raison de la surcharge supplémentaire. Si vous souhaitez établir un profil de production, vous pouvez consulter cette ressource dans laquelle React fournit une version de production spéciale avec profilage activé.

Modification du nom des méthodes de cycle de vie non sécurisées

L'année dernière dans une mise à jour l'équipe de React nous informa de la décision de changer les noms des méthodes de cycle de vie jugées dangereuses.

Les méthodes de cycle de vie concernées sont énumérées ci-dessous:

• ComponentWill Ne paniquez pas: votre ancienne application ne rompra pas avec cette mise à jour, car les anciens noms fonctionnent toujours. Cependant, chaque fois qu'ils seront utilisés, un avertissement s'affichera sur votre terminal:

  

  Les avertissements vous enverront des liens vers des ressources pour des alternatives à ces méthodes dangereuses, mais vous pouvez simplement exécuter un script de codemod simple qui entre dans votre application. et renomme automatiquement toutes les méthodes de cycle de vie non sûres:

   cd your_projectnpx react-codemod renommer-non-sûr-cycles-de-vie 

  L’exécution de ce codemod remplacera les anciens noms tels que composantWillMount par les nouveaux noms tel que UNSAFEcomponent :

  

  

  À l'avenir, l'équipe de React promet que les méthodes non sécurisées continueront de fonctionner pour cette mise à jour et même dans la version 17. Le préfixe sera permettre aux développeurs d'être constan on rappelle leur sécurité.

  Suppression des URL JavaScript

  Il est très ancien d’utiliser le javascript : dans l’attribut href mais c’est toujours fait. aujourd'hui. L’équipe de React a trouvé cette pratique peu sûre, car elle risquait d’ouvrir des failles de sécurité dans vos applications Web.

   const userProfile = {website: "javascript: alert ('vous avez piraté')",}; //; Ceci va maintenant avertir:  Profil  

  Dans cette nouvelle version de React, si vous l'utilisez toujours, des avertissements apparaîtront sur votre terminal pour vous rappeler qu'il est sujet aux vulnérabilités, et une solution comme utiliser des gestionnaires d’événements sont également suggérés. Cependant, à l'avenir, cette pratique sera déconseillée et générera une erreur.

  Factory Components

  Cela n'affectera pas beaucoup de monde, car il n'est pas très utilisé, mais lors de la compilation de React, les composants d'usine que retourner un objet avec une méthode de rendu ont été pris en charge; c'était avant Babel.

   function FactoryComponent () {return {render () {return 
  ; }}} 

  Cependant, il s'agit d'un modèle prêtant à confusion, car il peut être utilisé à la place des composants de fonction qui renvoient une valeur de modèle. Ce support est également responsable d'un peu de la lenteur des expériences de React lors de la compilation, il est donc déconseillé. Un avertissement sera consigné lorsque vous l'utiliserez et une excellente alternative devrait être d'ajouter:

   FactoryComponent.prototype = React.Component.prototype 

  Dans votre fichier, vous pouvez également le convertir en classe ou en composant de fonction.

  Plans futurs

  Voici quelques éléments à attendre de l'équipe React dans un proche avenir:

  1. Il est prévu de libérer les supports pour le mode simultané et le suspense pour l'extraction de données dans une seule version combinée.
  2. L’équipe a commencé à travailler sur un nouveau serveur de rendu compatible avec le système Suspense mais elle ne sera pas publiée avec la version ci-dessus. Cependant, une solution temporaire permettant au moteur de rendu de serveur existant d'émettre du code HTML pour les substitutions de suspense sera disponible.

  Mise à niveau de votre version

  React v16.9.0 est disponible dans le registre npm. Pour installer React 16 avec Yarn, exécutez:

   yarn add: react@^16.9.0 react-dom@^16.9.0 

  Pour installer React 16 avec npm, exécutez:

   npm install --save react @. ^ 16.9.0 react-dom@^16.9.0 

  Vous pouvez également utiliser les versions UMD de React via un CDN:

  Conclusion

  Le nouveau communiqué de React et toutes ses nouvelles fonctionnalités vous ont été présentés. avec. En attendant la prochaine version majeure, 17, nous apprenons également que quelques déprécations importantes ont été faites dans cette version mineure et que vous devriez en prendre note. Quelle est votre fonctionnalité préférée?

  ---