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

作者的解释是

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

Answer 1

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

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

在您的情况下，您正在“接受” ./app/App中的更改，./app/App是应用程序的根目录（可能是依赖关系树的根目录），因此，每个文件中的更改都可以从以下位置访问render将触发您提供的功能（print("Player Name Points") for name,pts in zip(p,s): print(f"{name:<18s}{pts:<2d}") #Player Name Points #Bettina 9 #Ann 4 #Charl 9 #Denni 4功能）。这意味着更改某些文件后，您的React应用将重新渲染Root组件。

希望这更加清楚：]

热模块重载进行显式渲染？

1 个答案: