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

Question

我偶然发现了 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 知识，想知道是否有人可以阐明更新代码的用法？

作者给出的解释是

As with the root reducer, we can hot-reload the React component tree whenever a component file changes. The best way is to write a function that imports the component and renders it, call that once on startup to show the React component tree as usual, and then reuse that function any time a component is changed.

Answer 1

Webpack HMR 允许您“交换”您的 webpack 包中的模块（文件），这提供了最佳的开发人员体验，因为您无需刷新页面即可看到您的更改。

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

在您的情况下，您正在“接受”./app/App 中的更改，这是您应用程序的根（它可能是依赖关系树的根），因此每个文件中的一个更改是reachable from ./app/App 将触发您提供的功能（render 功能）。这意味着当某些文件被更改时，你的 React 应用程序将 re-render Root 组件。

希望这更清楚:]

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

explicit render with hot module reloading?

reactjs

webpack

redux

webpack-hmr