在构造函数中与在构造函数外声明 React 状态

Question

是否有声明的任何区别state，从构造的？

我这里有一个组件示例：

class BurgerBuilder extends Component {
  state = {
    ingredients: {
      salad: 0,
      bacon: 0,
      cheese: 0,
      meat: 0
    },
    totalPrice: 30
  };
  ....
}

这里我只是声明了一个叫做state的变量，里面包含了组件的变量，但是我没有调用构造函数。

正如我声明的那样：

class BurgerBuilder extends Component {
  constructor() {
    super();
    this.state = {
      ingredients: {
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0
      },
      totalPrice: 30
    };
  }
  ....
}

我发现，我可以this.setState用于这两种解决方案，并且我的项目没有真正的区别。是否有最佳实践，在什么地方使用什么。

Answer 1

有什么区别吗？是否有最佳实践，在什么地方使用什么？

它们几乎相同。声明statewithoutcontructor()的语法是语法糖。

您在第一个示例中使用的内容称为Class field declarations。（该提案于 2017 年 7 月达到第 3 阶段）。

简而言之，这个提议允许我们使用更简单的语法来声明类字段，而无需constructor().

例如，这些代码是使用 ES2015 编写的

class Counter extends HTMLElement {
  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
    this.x = 0;
  }

  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.x.toString();
  }
}
window.customElements.define('num-counter', Counter);

通过使用Class 字段声明，它们将是这样的：

class Counter extends HTMLElement {
  x = 0;

  clicked() {
    this.x++;
    window.requestAnimationFrame(this.render.bind(this));
  }

  constructor() {
    super();
    this.onclick = this.clicked.bind(this);
  }

  connectedCallback() { this.render(); }

  render() {
    this.textContent = this.x.toString();
  }
}
window.customElements.define('num-counter', Counter);

使用这种语法的好处：

通过预先声明字段，类定义变得更加自文档化；实例经历的状态转换较少，因为声明的字段始终存在。

参考：JavaScript 的类字段声明