Quoi de neuf dans les dernières versions de React (16.4.0 & 16.4.1)

Les nouvelles versions de React (16.4.0, 16.4.1) sont maintenant disponibles. Ce post de blog fournit un aperçu des dernières fonctionnalités et améliorations trouvées dans les deux versions.

Avec la dernière version mineure de React, 16.4, plus un correctif suivant, 16.4.1, nous avons reçu beaucoup de correctifs, support pour Pointer Événements, un peu d'aide avec getDerivedStateFromProps () et quelques fonctionnalités expérimentales. Cela fait moins de deux mois que nous avons eu la version 16.4 qui nous a donné d'excellentes mises à jour comme le support officiel de l'API de contexte. Au lieu de vivre dans le passé regardons les nouvelles choses brillantes que nous obtenons avec les dernières versions.

Juste un rappel, vous pouvez toujours rester dans le coup avec les dernières versions ici dans le projet repo.

Pointer Events

Probablement le "plus brillant des brillants" pour la version 16.4.0 était le support de Pointer Events . C'était une fonctionnalité que les gens demandaient souvent pour être au courant des événements suivants:

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

Pendant longtemps, nous avons eu accès à des événements souris pour nous aider à comprendre comment un utilisateur interagissait avec l'application. De nos jours, les utilisateurs interagissent avec plus d'une souris, en utilisant par exemple le toucher ou un stylet. Les événements de pointeur héritent des événements de souris pour que nous puissions tout de même prendre cette information tout en développant différentes formes d'interaction d'entrée.

Vous pouvez jouer avec ici sur CodeSandbox. Dans l'exemple, il y a un cercle sur la page qui écoute setPointerCapture et d'autres événements ponctuels pour déplacer le cercle correspondant à l'interaction d'un pointeur. J'ai été capable de le déplacer avec la souris / trackpad et avec le toucher dans Chrome mais quand j'ai essayé de le déplacer avec Pixelbook Pen, j'ai reçu une erreur InvalidPointerId . Par curiosité j'ai essayé le Surface Pro et son stylo, qui a retourné la même erreur InvalidPointerId dans Chrome, mais qui fonctionnait très bien dans Firefox et Edge.

Voici un petit exemple du code de l'exemple CodeSandbox où il utilise Pointer Events:

Avant de devenir trop excités et de l'utiliser partout, les événements ne fonctionnent que lorsque les navigateurs prennent en charge la spécification Pointer Events. Selon MDN en ce moment, c'est à peu près tous les navigateurs sur les ordinateurs de bureau et mobiles sauf Safari. Comme je l'ai dit plus haut, il peut également y avoir un problème avec les stylets sur Chrome

Problèmes avec getDerivedStateFromProps

En travaillant pour implémenter le rendu asynchrone, l'équipe React a remarqué certains cas où le cycle de vie des composants existants pourrait encourager certaines pratiques de codage dangereuses. Cela a été remarqué avec componentWillMount componentWillUpdate et componentWillReceiveProps . Après avoir jugé que c'était dangereux et ajouté littéralement UNSAFE_ aux anciens noms de cycle de vie, ils ont sorti un remplacement commençant par getDerivedStateFromProps .

 class Exemple extends React.Component {
  statique getDerivedStateFromProps (props, state) {
    // ...
  }
} 

Ce nouveau cycle de vie doit gérer tout ce que nous avons déjà utilisé componentWillReceiveProps pour une utilisation avec componentDidUpdate . getDerivedStateFromProps est invoqué après l'instanciation d'un composant et la réception de nouveaux accessoires. Extrait d'un article par Brian Vaughn

"Il peut retourner un objet pour mettre à jour l'état ou null pour indiquer que les nouveaux props ne nécessitent aucune mise à jour de state . "

La version 16.4 incluait une correction de bogue pour getDerivedStateFromProps qui rendait certains bogues existants dans les composants React apparents et plus cohérent, surtout si votre application utilisait un anti-pattern. L'équipe de React a remarqué que les développeurs se trompaient sur l'utilisation de getDerivedState (et componentWillRecieveProps ) et espéraient pousser les changements et signaler les cas où ils ont été mal utilisés. Ils sont persistants en rappelant aux développeurs que le seul but getDerivedStateFromProps devrait être utilisé pour mettre à jour l'état interne d'un composant quand il y a des changements dans les accessoires . Ils veulent également rappeler à tout le monde qu'il devrait être utilisé avec parcimonie. Brian Vaughn a écrit un post sur certains anti-patterns en utilisant getDerivedStateFromProps et les solutions alternatives recommandées. Avant d'écrire ce super long nom, je recommande fortement de lire cet article

Liste des correctifs de 16.4.0 et 16.4.1

Il y avait beaucoup de corrections dans ces deux dernières versions mineures et correctives. Voici une liste de la liste combinée pour votre plus grand plaisir:

Réagir DOM

• Correction d'un crash lorsque le type d'entrée passe d'un type à un autre.
• Correction d'un crash dans IE11 lors de la restauration du focus sur un élément SVG
• Correction d'une entrée de plage qui ne se mettait pas à jour dans certains cas
• Fixation de la validation d'entrée inutilement dans Firefox
• Correction d'une valeur incorrecte event.target Evénement onChange dans IE9
• Correction d'une fausse erreur positive lors du retour d'un composant vide
• Correction d'un faux positif lors de l'utilisation de react-lifecycles-compat dans .
• Correction d'un bug qui empêchait la propagation du contexte dans certains cas
• Correction du rendu des composants à l'aide de forwardRef () sur un setState (19459006) plus profond . certains attributs ne sont pas correctement supprimés des noeuds d'éléments personnalisés.
• Correction des fournisseurs de contexte pour qu'ils ne renoncent pas aux enfants

Réagir sur le serveur DOM

• Correction d'une valeur incorrecte fournie par la nouvelle API de contexte

React Test Render

• Correction de getDerivedStateFromProps () dans la faible profondeur (19659030) Correction du support getDerivedStateFromProps () pour qu'il corresponde au nouveau comportement du DOM Réaction.
• Correction d'un crash testInstance.parent lorsque le parent est un fragment ou un autre nœud spécial

React ART

• Corrigé le contexte de lecture fourni par l'arbre géré par React DOM.

Pour en savoir plus sur chacun de ces correctifs, vous pouvez consulter leurs auteurs et les problèmes de github React Releases github page .

Mais attendez, il y a plus!

Avec cette longue liste de corrections, vous avez également reçu d'autres goodies avec les deux versions précédentes.

Réagir

• ] Affecter propTypes aux composants renvoyés par React.ForwardRef

React Test Renderer

• Autoriser plusieurs enfants racines dans l'API de parcours de rendu de rendu.
• forwardRef () Les composants sont maintenant détectables par les méthodes de parcours de rendu.
• Le rendu peu profond ignore maintenant setState () updaters qui retournent null ou undefined .

Réagir DOM

• Changer les noms d'événements internes. Cela peut casser des paquets tiers qui reposent sur des internes de React de manière non supportée.
• Avertir quand la fonction de rendu forwardRef () a propTypes ou defaultProps .
• Améliorer la façon dont forwardRef () et les consommateurs contextuels sont affichés dans la pile de composants
• Ajouter la possibilité de spécifier propTypes sur un composant de fournisseur de contexte.

J'espère que quelque chose sur votre liste de souhaits a été cochée ici. Vous pouvez toujours continuer à demander les changements que vous voulez sur le repo de React . Doigts croisés! Mieux encore, n'hésitez pas à décroiser ces doigts et à les utiliser pour faire les corrections vous-même en suivant leur guide des contributions .

Time for Experiments

Il y avait aussi un nouveau profileur expérimental composante pour tout ce que vous réagissez scientifiques fous là-bas. Ce nouveau composant vous permet de collecter de nouvelles métriques de temps. Lors de l'utilisation de ce composant, vous pouvez avoir des informations de synchronisation collectées par React et les transmettre à la fonction onRender . Pour l'instant, la plupart des fonctionnalités de ce nouveau composant sont cachées derrière l'indicateur enableProfileModeMetrics . Lorsque le drapeau est désactivé, le composant rendra ses enfants normalement. Voici un petit extrait de code de PR de Brian Vaughn :

 const Profiler = React.unstable_Profiler;

rendre(
  {/ * Composants non mesurés ... * /}
  
    {/ * Composants à mesurer ... * /}
  
  {/ * Composants non mesurés ... * /}

Keep Up

Vous pouvez consulter tous les détails, les validations et plus encore pour toutes les dernières informations de version de React sur leur repo . Il est facile de dire que l'équipe de React a été occupée et ne montre aucun signe de ralentissement. C'est l'une des raisons pour lesquelles l'équipe de Kendo UI dispose de mises à jour pour s'assurer que nous nous tenons à jour pour vous aider à créer vos applications React plus rapidement. J'espère que vous obtenez toutes les fonctionnalités et les correctifs que vous espériez - restez à jour en téléchargeant l'essai gratuit ou en vous connectant à votre compte si vous en avez un!

Jusqu'à la prochaine version, Happy Coding!