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 = {}声明是一个类属性，它当前不是JavaScript语言的一部分。某些实用程序（如Babel）会将其编译为合法的JavaScript代码。

但是，类中缺少function关键字以及...运算符是ECMAScript 6的一部分，ECMAScript 6已正式实现为该语言（尽管某些浏览器无法识别它）尚未）。

Class Definition
Spread Operator

Answer 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函数组件中使用状态（没有构造函数），但是可以使用高阶组件或渲染prop组件。您可以找到有关here的更多信息。

没有构造函数在类的体内声明状态

2 个答案: