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

有什么区别吗？是否有关于如何使用的最佳实践在哪里？

它们几乎相同。声明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

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

1 个答案: