我在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);
react-hot-reload / babel插件的目的是为了快速开发。它允许最近更改的脚本无更新,而无需刷新应用程序/页面。绝不是必需的,但是它使开发人员可以快速迭代并查看其代码更改,而不会丢失内存中的状态。