如何让反应热加载器为 jsx 工作？答案

【问题标题】：How to make react hot loader working for jsx?如何让反应热加载器为 jsx 工作？
【发布时间】：2016-10-10 09:00:58
【问题描述】：

我刚开始使用 reactjs，并尝试为我的 jsx 进行热重载。我分叉了这个应用程序：https://github.com/gaearon/react-hot-boilerplate/tree/next。

我将 app.js 稍微更改为：

import React, { Component } from 'react';

export default class App extends Component {
  constructor(){
      super();
      this.state = {
        txt: 'this is the  txt',
        cat: 0
      }
    }

  render() {
    return (<div>
          {this.state.txt}
        <h1>sdfdsfdsfs, world.</h1>
        </div>

    );
  }
}

当我更改 h1 标记中的文本时，会刷新浏览器。但是，当我更改 txt 属性时，什么也没有发生。我怎样才能让它工作？

【问题讨论】：

你的意思是当你在构造函数中更改this.state = { ... }中的txt状态时没有任何反应？

标签： javascript reactjs react-native

【解决方案1】：

React-hot-loader 无法在构造函数中重新加载对初始状态的更改。这是因为当组件内部发生变化时，react-hot-loader 不会再次调用组件的构造函数。

它不能热重载更改到初始状态。不要忘记这个属性赋值相当于在构造函数中设置字段。即使您更改构造函数，该字段也已设置。构造函数不会运行两次。所以不支持。

查看这个问题：https://github.com/gaearon/react-transform-hmr/issues/41

【讨论】：