Deklarowanie stanu React, w konstruktorze, a poza konstruktorem

Question 1

Czy jest jakaś różnica w deklarowaniu state, poza konstruktorem?

Mam tutaj przykład komponentu:

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

Tutaj po prostu deklaruję zmienną o nazwie state, która zawiera zmienne komponentu, ale nie wywołuję konstruktora.

Gdzie jak deklaruję:

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

Odkryłem, że mogę używać this.setState dla obu rozwiązań i że nie ma żadnej różnicy w moim projekcie. Czy istnieje najlepsza praktyka dotycząca tego, czego używać i gdzie.

reactjs components state

2

Dedi 12 listopad 2018, 15:55

Answer

Czy jest jakaś różnica? Czy jest jakaś najlepsza praktyka, czego używać i gdzie?

Są prawie takie same. Składnia deklarowania state bez contructor() to cukier składniowy.

To, czego używasz w pierwszym przykładzie, nazywa się pole klasy deklaracje. (Propozycja ta osiągnęła etap 3 w lipcu 2017 r.).

Krótko mówiąc, ta propozycja pozwala nam na prostszą składnię do deklarowania pól klas, bez potrzeby constructor().

Na przykład te kody są pisane za pomocą 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);

Korzystając z deklaracji pól klasy, będą one lubię to:

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

Korzyści z używania tej składni:

Deklarując pola z góry, definicje klas stają się bardziej samodokumentujące; instancje przechodzą przez mniej przejść między stanami, ponieważ zadeklarowane pola są zawsze obecne.

Odniesienie: Deklaracje pól klasy dla JavaScript

5

Nguyen You 12 listopad 2018, 16:20

Question 2