在构造函数中声明React状态，而不是在构造函数之外

Posted 2021-04-08

在构造函数中声明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作为两种解决方案，并且我的项目没有真正的区别。是否有最好的做法，在哪里使用。

答案

有什么区别吗？有什么最好的做法，在哪里使用？

它们几乎是一样的。在没有state的情况下声明contructor()的语法是syntactic sugar。

---

你在第一个例子中使用的是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 field declarations，他们将是这样的：

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

使用此语法的好处：

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

---

参考：Class field declarations for JavaScript