如何在react中启用热模块更换(HMR)

Question

create-react应用程序是否内置了对HMR的支持？我见过react应用程序在更改时重新加载。但这不是HMR。我需要添加什么样的webpack配置才能启用HMR。我在线阅读了关于将webpack-dev-serve中的hot选项设置为true的内容。我对HMR的反应感到困惑

搜索了一段时间后，我发现了这个

import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/App'
// Opt-in to Webpack hot module replacement
if (module.hot) module.hot.accept()
ReactDOM.render(
<App />,
document.getElementById('app')
)

然后它说在webpack.config.js中添加HotModuleReplacementPlugin
我需要手动添加它还是它是预先添加的。我还读到反应使用ReactRefreshWebpackPlugin。我很困惑，请帮帮我。

Answer 1

首先，我们必须记住HMR是如何工作的：

它允许在运行时更新所有类型的模块，而不需要完全刷新。

其次，我们必须记住React是如何工作的：它只更新DOM中需要更新的部分。例如，如果您有一个React应用程序，并且向其中添加一个段落，则会添加该段落的DOM节点，并且页面不会重新加载。如果更改现有段落的内容，则只会重新加载表示该段落内容的DOM节点，因为它需要重写。

第三，

由于webpack dev-server v4.0.0，因此默认情况下会启用热模块更换。

第四，

Create React应用程序在引擎盖下使用webpack。您可以通过以下命令弹出整个配置：

npm run eject

综合来看，Create React App在默认情况下确实启用了HMR。您可以按照以下步骤进行确认：

1. 通过执行以下命令创建并运行应用程序：

npx create-react-app my-app
cd my-app
npm start

2. 在浏览器中打开应用程序后，选择一段文本，例如单词"重新加载"；。然后，转到源代码并更改App.js文件中应用程序的背景色。您会注意到背景颜色在没有完全刷新的情况下会发生变化，因为文本仍处于选中状态。现在，如果您更改源代码中段落的内容，您将看到所选内容消失。这是React对DOM的重写，只是需要更新的一小部分。此外，如果在浏览器中选择段落的文本，然后转到源代码并更改链接的内容，您会看到链接的内容在没有清除选择的情况下得到了更新，因为React只会更新需要更新的DOM片段