使用热模块重新加载的显式渲染？答案

【问题标题】：explicit render with hot module reloading?使用热模块重新加载的显式渲染？
【发布时间】：2020-12-12 18:57:01
【问题描述】：

我偶然发现了this，并不太明白背后的原理。

const render = () => {
  const App = require('./app/App').default

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  )
}

render()

if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept('./app/App', render)
}

这段代码的想法应该只是在 Redux 中添加这个 React 应用程序的功能，但作者还明确定义了 render 方法并在底部添加了 module.hot。我真的没有webpack 知识，想知道是否有人可以对更新代码的用法有所了解？

作者给出的解释是

与根 reducer 一样，我们可以在组件文件更改时热重载 React 组件树。最好的方法是编写一个导入组件并渲染它的函数，在启动时调用一次以照常显示 React 组件树，然后在组件更改时重用该函数。

【问题讨论】：

标签： reactjs webpack redux webpack-hmr

【解决方案1】：

Webpack HMR 允许你在你的 webpack 包中“交换”一个模块（文件），这提供了最好的开发者体验，因为你不需要刷新页面来查看你的更改。

作为 HMR 机制的一部分，应用程序应“接受”更改并提供一个函数，当接受的文件发生更改时将调用该函数。

在您的情况下，您正在“接受”./app/App 中的更改，这是您的应用程序的根目录（它可能是依赖关系树的根目录），因此可以从@987654322 访问的文件之一中的每次更改@ 将触发您提供的函数（render 函数）。这意味着当某些文件发生更改时，您的 React 应用程序将重新渲染 Root 组件。

希望这更清楚:]

【讨论】：