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

Question

我在某处看到了下面的代码，我很好奇。它看起来很干净但对我来说很不寻常。为什么在没有构造函数的情况下声明 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} />
    );
  }
}

Answer 1

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

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

Class Definition
Spread Operator

Answer 2

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

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>
    )
  }
}

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

您也可以在 React 函数组件中使用状态（没有构造函数），但使用高阶组件或渲染道具组件。你可以找到更多关于它的信息 here.

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

react without constructor declaring state in class's body

javascript

ecmascript-6

reactjs