Hace aproximadamente un mes salió React Hooks, e inmediatamente quedó claro que React-Hot-Loader estropea todo las frambuesas y no solo no es muy compatible con ellas, sino que también rompe el resto del código. En general, fue un mes caluroso ...

Que hay adentro

• Nueva API para HMR
• Soporte completo de React 16.6: React.lazy, React.memo y forwardRef
• Por supuesto ganchos
• Reaccionar - dom (lo que sea que eso signifique)
• Complemento de paquete web
• Límites de errores automáticos
• Render puro
• "Principios"

Nueva API para HMR

Aquí, casi nada ha cambiado, hacía hot , se mantuvo hot . Se volvió más corto e inteligente:

Antes

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

Ahora

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

De hecho, el nuevo hot es solo el viejo, dividido en dos partes. Como resultado, es posible detectar situaciones en las que se llamó a la primera parte y la segunda no ( detalles ).

Reacciona 16.6 soporte

forwardRef simplemente funciona (nadie dijo que no funcionaran antes), memo se actualizará a pesar del hecho de que es memo , pero lazy aprendió a reimportar sus componentes internos.

Y, por supuesto, todo funciona directamente desde el ataúd.

Reaccionar ganchos de apoyo

Después del lanzamiento de 16.7, quedó claro que el problema con Hooks. Desafortunadamente, proyectos tan grandes como StoryBook ( problema ) y Gatsby ( problema ) se vieron afectados por este desastre.

El problema surgió de la naturaleza de React-Hot-Loader: para engañar a React y evitar la destrucción de la versión anterior del árbol, HotLoader envuelve cada componente en un contenedor que solo cambia el enlace al componente "real" dentro de sí mismo.
Por supuesto, los SFC estaban envueltos en componentes, y todo se rompió.

De hecho, los SFC dieron vuelta con los SFC que devolvieron una instancia de la Clase. Una característica de reacción de "fábrica" ​​muy indocumentada.

La comunidad rápidamente encontró una salida (que yo mismo no pensé de {pureSFC: true} ), afortunadamente, solo tuve que cambiar una opción: {pureSFC: true} , y RHL entraría en un modo de operación más simple, que anteriormente estaba desactivado debido a un problema force-update, que también actualizamos ahora.

React-hot-dom

Hot-Loader siempre se ha tratado de hackear React, y lo hizo sobrecargando createElement y devolviendo componentes "proxied" para engañar al cheque dentro de React-Dom . Ahora Hot-Loader solo hackeará este mismo chequeo :) Funciona increíblemente.

Desafortunadamente, la reacción en sí no proporciona ninguna API para esto, por lo que lanzamos un paquete especial: hot-loader / react-dom con todos los parches necesarios.

Poner parche es 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 

Para aquellos que no desean instalar paquetes para zurdos, el paquete viene con un cargador de paquetes web que parcheará específicamente su versión de react-dom.

Webpack-loader

El mismo cargador de paquetes web que obtuvimos en la versión 4 nos regresó nuevamente. Por qué

• Para obtener rápidamente módulos_nodo y proporcionar más información de código
• Para parchar react-dom
• Para los que no les gusta babel

Límites de errores automáticos

Los errores durante el desarrollo son una cosa favorita, pero a nadie le gustaron los errores + react-hot-loader: simplemente no funcionó muy bien y, a veces, no lo hizo.

A partir de la versión 4.6, React-Hot-Loader agregará componentDidCatch a todos los componentes antes del inicio de la actualización, y lo eliminará después de la actualización. Los errores se pueden detectar y mostrar "justo en el lugar".

Parece un poco, pero este poco cambia todo el proceso de desarrollo. Y, por supuesto, todo está ajustado a su gusto.

Render "puro"

Este problema siempre ha sido con Hot-Loader. Hasta que asomaron la nariz . En resumen: en React Dev Tools, puede hacer clic con el botón derecho en el menú y saltar directamente al componente ... Más precisamente (era) no puede hacer esto

Ahora existe la opción pureRender , siempre que esté desactivada de forma predeterminada, lo que elimina un par de efectos secundarios del componente que conducen a este problema.

Desafortunadamente, esto solo funciona para componentes "basados ​​en la clase", para SFC se requiere un parche en react-dom, que se mencionó anteriormente.

En principio, ahora existe la oportunidad de ocultar prácticamente la presencia de HotLoader en el sistema.

Principios

Hace apenas una semana, Dan Abramov publicó su lista de deseos para el cargador en caliente : 22 principios que un cargador en caliente debe cumplir para ser "correcto" si no es blanco y esponjoso.

Actualmente, 14 puntos están 100% completos y otros 4 a 50%. Total - 17 de 22. En principio, no está mal, y está claro lo que hay que hacer para terminar el resto.
Quién sabe, tal vez después de eso Dan volverá al proyecto.

Y que

• ¡solo actualice su cargador en caliente!
• reemplaza el viejo hot por el nuevo hot , sé que suena extraño, pero me entiendes.
• intenta parchear react-dom de alguna manera. Esto no es tan necesario, todo funcionará bien sin este paso, pero será muy bueno con él.
• Eso es todo. Debería funcionar Solo inténtalo.

Contigo estaba ️

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