在没有构造函数在类的主体中声明状态的情况下做出反应答案

【问题标题】：react without constructor declaring state in class's body在没有构造函数在类的主体中声明状态的情况下做出反应
【发布时间】：2018-01-10 03:40:11
【问题描述】：

我在某处看到了下面的代码，我很好奇。它看起来很干净，但对我来说很不寻常。为什么 state = {} 声明时没有构造函数？

和load 声明时没有函数关键字？据我所知，有很多方法可以编写函数

function async load() {} 或者 const async load = ()=>{}

...args 做了什么？是否传播arguments？

import View from './View';
import loadData from './loadData';
export default class extends Component {
  state = {};
  load = this.load.bind(this);
  async load(...args) {
    try {
      this.setState({ loading: true, error: false });
      const data = await loadData(...args);
      this.setState({ loading: false, data });
    } catch (ex) {
      this.setState({ loading: false, error: true });
    }
  }
  render() {
    return (
      <View {...this.props} {...this.state} onLoad={this.load} />
    );
  }
}

【问题讨论】：

查看stackoverflow.com/questions/45832853/…

标签： javascript reactjs ecmascript-6

【解决方案1】：

state = {} 声明是一个类属性，目前不属于 JavaScript 语言。某些实用程序（例如 Babel）会将其编译为合法的 JavaScript 代码。

但是，类中缺少 function 关键字以及 ... 运算符是 ECMAScript 6 的一部分，该语言已正式实施到该语言中（尽管有些浏览器尚不能识别它）。

Class Definition
Spread Operator

【讨论】：

这并没有解释类实例变量定义是什么
@AndyRay 我没有意识到，谢谢你指出我的错误。

【解决方案2】：

是的，你可以在没有构造函数的情况下为 React 类组件初始化状态：

class Counter extends Component {
  state = { value: 0 };

  handleIncrement = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };

  handleDecrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };

  render() {
    return (
      <div>
        {this.state.value}

        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    )
  }
}

它使用 类字段声明，这些声明还不是语言的一部分，但已通过 Babel 启用。您可以通过here 签出示例应用程序。

你也可以在 React 函数组件中使用 state（没有构造函数），但是使用高阶组件或 render prop 组件。您可以通过here了解更多信息。

【讨论】：