React Transform HMR（Hot Module Replacement）是一个 npm 包，它可以用来在开发过程中实现热模块替换，提升开发效率。
简介
热模块替换是指在应用程序运行时，能够替换已加载的代码而无需重载整个页面。这样可以快速地查看修改后的效果，不需要手动刷新浏览器。React Transform HMR 是基于 React Hot Loader 的扩展库，用于支持 React 16.8 及以后的版本。
安装
首先，需要安装 react-transform-hmr，可以使用 npm 或者 yarn：
--- ------- ---------- -------------------
---- --- ----- -------------------
接着，在 webpack 的配置文件中添加相应的配置：
-- -----------------
----- ------- - -------------------
----- - -------------------------- - - --------
-------------- - -
-- ---
-------- -
--- ----------------------------
--
------- -
------ -
-- ---
-
----- --------------
---- ---------------- ----------------------
-
-
-
--使用
在使用 React Transform HMR 之前，需要确保项目中已经安装了 React Hot Loader。如果没有安装，请按照 官方文档 进行安装。
接下来，在需要热替换的组件文件中，使用 hot 函数包裹组件：
-- ------ ------ - --- - ---- ------------------------ ------ ----- ---- -------- ----- --- - -- -- - ------ ----------- ------------- -- ------ ------- ---------
这样就完成了对组件的热替换配置。现在，每当修改了组件代码之后，只需要保存文件，React Transform HMR 就会自动将新的代码加载到应用程序中，实现热替换。
示例代码
以下是一个完整的示例代码，演示了如何使用 React Transform HMR 实现热替换：
-- -----------------
----- ------- - -------------------
----- - -------------------------- - - --------
-------------- - -
----- --------------
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
-------- -
--- ----------------------------
--
------- -
------ -
-
----- --------------
---- ---------------- ----------------------
-
-
-
---- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - --- - ---- ------------------------
------ --- ---- --------
----- ----------- - --------------------------------
-------------------- --- -------------
-- ------------ -
-------------------------- -- -- -
----- ------- - -------------------------
------------------------ --- -------------
---
--- ------ ------ - --- - ---- ------------------------ ------ ----- ---- -------- ----- --- - -- -- - ------ ----------- ------------- -- ------ ------- ---------
总结
React Transform HMR 提供了一种方便快捷的方式，可以在开发过程中实现热替换。通过使用它，开发者可以节省大量时间，同时也能够更加专注于代码的编写和调试。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/50744