【发布时间】:2020-06-05 22:57:42
【问题描述】:
我已经根据 npm 上的 getting started 设置了 react-hot-reload。第一步是添加
// .babelrc
{
"plugins": ["react-hot-loader/babel"]
}
我有一个带有计数器状态和递增状态计数器的按钮的单个组件应用程序。在对此进行测试时,它似乎可以工作,并且当我在我的 render() 方法中添加/删除随机组件时,在我的.babelrc 中保留有/没有这个插件的状态。
所以我的问题是,这个拼图的目的是什么?为什么需要它?
我用来测试这个的应用程序,
import { hot } from 'react-hot-loader/root';
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value:0};
}
handleButtonClick(event)
{
console.log("click");
this.setState( state => ({
value:state.value + 44
}));
}
render() {
return (
<div>
<div>
<a>asd</a>
<p>asssd</p>
<input></input>
<button onClick={this.handleButtonClick.bind(this)}></button>
2<div>{this.state.value}</div>
</div>
</div>
);
}
}
export default hot(App);
【问题讨论】:
-
你不明白的地方能不能具体点?您发布的链接告诉您它的用途、工作原理以及 Fast Loader 如何弃用它
-
特别是 babel 组件。我了解 react-hot-reload 的用途。但如上所述,如果我在 .babelrc 中添加或删除该位,我看不出有什么区别。我仍然在 App.js 中使用 import 并使用 export default hot(App),只是不包括 .babelrc 插件,它仍然有效。我喜欢的 URL 没有解释 babel 位的具体用途。