热重装如何运作?

时间:2017-04-06 05:19:10

标签: javascript reactjs networking

我正在学习React,我正在使用create-react-app运行它,它允许我编辑名为App.js的文件中的文本,并保存该文件中的任何更改,带有地址的网页浏览器中的http://localhost:3000/会自动更新而不会重新加载。通常,在制作html / plain js文件时,我需要重新加载页面。那么它如何动态更新自己呢?

3 个答案:

答案 0 :(得分:2)

有一个热重新加载的概念。热重新加载背后的想法是让应用程序保持运行并注入您在运行时编辑的新版本文件。它利用HMR而无需重新加载页面,就地替换已更改的组件,保留状态。这意味着,你的变化将在大约半秒内显现出来;如果它是一个对话框,你不需要重新打开它,你的文本输入仍然填充等等。简而言之,它是迭代开发的巨大福音,你花费更少的时间等待你的应用程序重新加载。您可以找到更多详细信息here

答案 1 :(得分:1)

您正在使用的cli使用webpack来实现此目的。 Webpack是一个模块捆绑器,它从您嵌入到index.html文件中的所有js / ts / jsx / tsx文件创建一个捆绑文件。要实现实时重新加载webpack使用webpack-dev-server(一个小node.js表达服务器)你可以配置你的webpack来监视文件的变化,webpack会在你的代码发生变化时更新你的捆绑文件。您可以详细了解它的作用here。 webpack的所有配置都是用webpack.config文件编写的。您可以了解有关webpack here的更多信息。您也可以关注此link

答案 2 :(得分:1)

这实际上不是一个独立的事情。

这是因为如果你进行任何更改,反应使用webpack dev服务器重新加载包。

如果您想要这样做,您需要设置本地服务器并始终在同一服务器上进行编辑。 browserSync也是一个选项,但您需要使用nodejs