Объявление состояния React в конструкторе, а не в конструкторе - PullRequest
Новая
       5

Объявление состояния React в конструкторе, а не в конструкторе

0 голосов
/ 12 ноября 2018

Есть ли разница в объявлении 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
    };
  }
  ....
}

Iобнаружил, что я могу использовать this.setState для обоих решений и что в моем проекте нет никакой разницы.Есть ли лучшая практика, на что использовать, где.

1 Ответ

0 голосов
/ 12 ноября 2018

Есть ли разница?Есть ли лучшая практика, что и где использовать?

Они почти одинаковые.Синтаксис объявления state без contructor(): синтаксический сахар .

То, что вы используете в первом примере, называется Объявления полей класса .(Это предложение достигло стадии 3 в июле 2017 года.)

Короче говоря, это предложение позволяет нам упростить синтаксис объявления полей класса без необходимости 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 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

...