如何解决热模块重载进行显式渲染?
我偶然发现了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组件树,然后在每次更改组件时重用该函数。
解决方法
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组件。
希望这更加清楚:]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。