前言
在 React 开发中，热加载已经成为了一个必备的工具，它可以方便地在修改代码时自动进行文件的重新加载，从而提高开发效率。而 React-Hot-Loader 是一个常用的热加载库，在大型 React 应用中使用起来更是方便。
而在 TypeScript 中使用 React-Hot-Loader 则需要结合 @types/react-hot-loader 这个 npm 包来进行编写。本篇文章将针对该 npm 包的使用进行详细的介绍和示例。
安装和使用
本教程假设您已经对 React 和 TypeScript 有一定的了解和基础，如果没有，请先熟悉它们再来阅读此文。
安装
在安装 @types/react-hot-loader 之前，需要先安装 React-Hot-Loader：
npm install react-hot-loader@next
然后再安装 @types/react-hot-loader：
npm install --save-dev @types/react-hot-loader
使用
在 tsconfig.json 中添加如下配置：
-- -------------------- ---- -------
------------------ -
---
---------- ----
-------- -
------------------- -
----------------------------------------
-
-
-在 App.tsx 中使用 React-Hot-Loader：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - --- - ---- -------------------
----- --- ------- --------------- -
-------- -
------ ----------- ------------
-
-
------ ------- -----------------使用 hot(module) 包装组件之后，允许在修改代码时进行热加载。
示例
下面是一个使用 @types/react-hot-loader 的示例代码，它将使用 React-Hot-Loader 打印出一个随机数，并允许在修改代码时进行热加载。
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - --- - ---- -------------------
------ - -- -------- ---- ------------
--------- ----- -
----- -------
-
--------- ----- -
------- -------
-
----- --- ------- ---------------------- ------ -
------------------ ------ -
-------------
---------- - -
------- -------------
--
-
-------- -
------ -
-----
---------- ----------------------
--------- ------- -----------------------
------
--
-
-
------ ------- -----------------
-------------------- ------------ --- ---------------------------------结语
本文介绍了 @types/react-hot-loader 的安装和使用方法，并配上了示例代码。希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/203523