我已经根据 getting started 设置了 react-hot-reload在 npm 上。第一步是添加

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

我有一个单组件应用程序，它有一个计数器状态和递增状态计数器的按钮。当测试它时它似乎工作，并且当我在我的 render() 方法中添加/删除随机组件时，在我的 .babelrc 中使用/不使用这个插件保持它的状态。

所以我的问题是，这 block 拼图的用途是什么？为什么需要它？

我用来测试这个的应用程序，

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 插件的目的是为了快速开发。它允许最近更改的脚本无需刷新应用程序/页面即可更新。无论如何都不需要它，但它允许开发人员快速迭代和查看他们的代码更改，而不会丢失内存中的状态。

关于reactjs - 'react-hot-loader/babel' 是做什么用的？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60339893/