【问题标题】:What is 'react-hot-loader/babel' for?'react-hot-loader/babel' 是干什么用的?
【发布时间】: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 位的具体用途。

标签: reactjs react-hot-loader


【解决方案1】:

react-hot-reload/babel 插件的目的是为了快速开发。它允许更新最近更改的脚本而无需刷新应用程序/页面。它不是必需的,但允许开发人员快速迭代并查看他们的代码更改,而不会丢失内存中的状态。

【讨论】:

  • 是的,但是在没有 react-hot-reload/babel 的情况下进行测试,我仍然没有使用上面的示例应用程序失去我的状态。单击按钮几次,然后更改 .jsx 文件中的某些内容,并且计数器值保持不变,并且更改出现。似乎使这种情况发生的一点是在 jsx 文件中的导入并用 hot() 包装应用程序 - 所以仍然不确定这个 babel 位实际上做了什么。
  • 第二。我从.babelrc 中删除了react-hot-loader/babel,并且所有内容仍然热重载并保持状态。与 webpack 配置中的 webpack.HotModuleReplacementPlugin 相同 - 似乎不需要。
猜你喜欢
  • 2016-05-30
  • 2015-12-03
  • 2018-07-29
  • 2016-08-08
  • 2016-07-28
  • 2023-03-07
  • 2020-08-18
  • 2017-01-09
  • 2018-09-12
相关资源
最近更新 更多