Il y a environ un mois, React Hooks est sorti, et immédiatement il est devenu clair que React-Hot-Loader gâte tout les framboises et est non seulement pas très compatible avec elles, il casse également le reste du code. En général, ce fut un mois chaud ...

Qu'y a-t-il à l'intérieur?

• Nouvelle API pour HMR
• Prise en charge complète de React 16.6 - React.lazy, React.memo et forwardRef
• Bien sûr, les crochets
• React - dom (quoi que cela signifie)
• Plugin Webpack
• Limites d'erreur Automagic
• Rendu pur
• «Principes»

Nouvelle API pour HMR

Ici, presque rien n'a changé - il faisait hot - est resté hot . Plus court et plus intelligent:

Avant

 import {hot} from 'react-hot-loader'; .... export default hot(module)(MyComponent) 

Maintenant

 import {hot} from 'react-hot-loader/root'; .... export default hot(MyComponent) 

En fait, le nouveau hot n'est que l'ancien, divisé en deux parties. Par conséquent, il est possible de détecter des situations lorsque la première partie a été appelée et la seconde non ( détails ).

Prise en charge de React 16.6

forwardRef fonctionne juste (personne n'a dit qu'ils ne fonctionnaient pas auparavant), le memo sera mis à jour malgré le fait qu'il s'agit d'un memo , mais lazy appris à réimporter ses composants internes.

Et bien sûr, tout fonctionne directement du cercueil.

Prise en charge des crochets React

Après la sortie de 16.7, il est devenu clair que le problème avec Hooks. Malheureusement, des projets aussi importants que StoryBook ( problème ) et Gatsby ( problème ) ont été touchés par cette catastrophe.

Le problème découle de la nature même de React-Hot-Loader - afin de tromper React et d'empêcher la destruction de l'ancienne version de l'arborescence, HotLoader encapsule chaque composant dans un wrapper qui ne modifie que le lien vers le "vrai" composant en lui-même.
Bien sûr, les SFC étaient enveloppés dans des composants et tout s'est cassé.

En fait, les SFC se sont retournés avec des SFC qui ont renvoyé une instance de la classe. Une fonctionnalité React "d'usine" très non documentée.

La communauté a rapidement trouvé une issue (à laquelle je n'ai pas pensé tout de {pureSFC: true} ), heureusement, je n'ai eu qu'à changer une option - {pureSFC: true} , et RHL se mettrait dans un mode de fonctionnement plus simple, qui était auparavant désactivé en raison d'un problème avec des force-update, que nous avons également mis à jour maintenant.

React-hot-dom

Hot-Loader a toujours eu pour but de pirater React, et il l'a fait en surchargeant createElement et en renvoyant les composants «mandatés» pour tromper la vérification à l'intérieur de React-Dom . Maintenant, Hot-Loader va pirater juste cette vérification :) Cela fonctionne étonnamment.

Malheureusement, le react lui-même ne fournit aucune API pour cela, nous avons donc publié un package spécial - hot-loader / react-dom avec tous les correctifs nécessaires.

Mettre le patch est simple:

 // this would always work yarn add @hot-loader/react-dom@npm:react-dom // or change your webpack config alias: { 'react-dom': '@hot-loader/react-dom' } // or do the same with package.json to enable it in parcel 

Pour ceux qui ne souhaitent pas installer de packages pour gauchers, le pack est livré avec webpack-loader qui corrigera spécifiquement votre version de react-dom.

Webpack-loader

Le même chargeur de webpack que nous avons cloué dans la version 4 nous est retourné. Pourquoi?

• Pour mettre rapidement la main sur node_modules et fournir plus d'informations sur le code
• Pour patcher react-dom
• Pour ceux qui n'aiment pas babel

Limites d'erreur Automagic

Les erreurs pendant le développement sont une chose préférée, mais personne n'a aimé les erreurs + react-hot-loader - cela ne fonctionnait tout simplement pas très bien, et parfois cela ne fonctionnait pas du tout.

À partir de la version 4.6, React-Hot-Loader ajoutera componentDidCatch à tous les composants avant le début de la mise à jour et le supprimera après la mise à jour. Des erreurs peuvent être détectées et affichées "juste sur place".

Cela semble être une bagatelle, mais cette bagatelle change tout le processus de développement. Et bien sûr, tout est réglé à votre goût.

Rendu "pur"

Ce problème a toujours été avec Hot-Loader. Jusqu'à ce qu'ils se piquent le nez . En bref - dans React Dev Tools, vous pouvez cliquer avec le bouton droit sur le menu et passer directement au composant ... Plus précisément (c'était), vous ne pouvez pas le faire

Il y a maintenant l'option pureRender , tant qu'elle est désactivée par défaut, ce qui supprime quelques effets secondaires du composant qui conduisent à ce problème.

Malheureusement, cela ne fonctionne que pour les composants "basés sur la classe", pour SFC un correctif dans react-dom est requis, comme mentionné ci-dessus.

En principe, il est désormais possible de masquer pratiquement la présence de HotLoader dans le système.

Principes

Il y a à peine une semaine, Dan Abramov a publié sa liste de souhaits pour les chargeurs à chaud - 22 principes qu'un chargeur à chaud doit respecter pour avoir «raison» sinon d'être blanc et moelleux.

Actuellement, 14 points sont complétés à 100% et 4 à 50% supplémentaires. Total - 17 sur 22. En principe, pas mal, et il est clair ce qui doit être fait pour finir le reste.
Qui sait, peut-être qu'après cela, Dan reviendra au projet.

Alors quoi

• il suffit de mettre à jour votre chargeur chaud!
• remplacez l'ancien hot par le nouveau hot , je sais que cela semble étrange, mais vous me comprenez.
• essayez de corriger en quelque sorte react-dom. Ce n'est pas si nécessaire, tout fonctionnera bien sans cette étape - mais ce sera très bien avec.
• c'est tout. Ça devrait marcher. Essayez-le.

Avec toi était ️

https://github.com/gaearon/react-hot-loader