événement de cycle de vie de l'état et prevState dans react.js

Voici une démo avec une commenté le code pour vous donner plus d'informations: http://codepen.io/PiotrBerebecki/pen/rrGWjm

1. Quel est l'état de la ligne 3? qui ressemble à une variable globale, il
de sens que si elle a var ou const devant elle. C'est que le cycle de vie
fonction/var?

state dans la ligne 3 est juste une propriété du composant de Compteur. Une autre façon d'initialiser l'état de Réagir à l'aide de ES6 la syntaxe est comme suit:

constructor() {
  super();
  this.state = {
    value: 0
  }
}

Réagir docs: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

[Réagir ES6 classe] API est similaire à Réagir.createClass à l'exception de
getInitialState. Au lieu de fournir un distinct getInitialState
méthode, vous mettre en place votre propre propriété de l'etat dans le constructeur.

2. Dois-je importer les Composants de réagir? Je me souviens que j'
n'a pas besoin de le faire à la v15.

Alternativement, vous pouvez simplement importer de Réagir et de définir une classe de la manière suivante:

import React from 'react';

class Counter extends React.Component {
...

Ci-dessous vous permettent également d'utiliser les API du Composant:

import React, { Component } from 'react';

class Counter extends Component {
... 

3. D'où vient prevState venir?

La prevState vient de la setState api: https://facebook.github.io/react/docs/component-api.html#setstate

Il est également possible de passer d'une fonction avec la signature
fonction(état, accessoires). Cela peut être utile dans certains cas, quand vous voulez
pour mettre en file d'attente atomique mise à jour qui consulte la valeur précédente de
état+accessoires avant de régler les valeurs. Par exemple, supposons que nous voulions
pour incrémenter une valeur dans l'état:

this.setState(function(previousState, currentProps) {
  return {
     value: previousState.value + 1
  };
});

Vous verrez souvent les développeurs de la mise à jour de l'état de la manière suivante. C'est moins fiable que la méthode ci-dessus que l'état peut être mis à jour de manière asynchrone et nous ne devrions pas compter sur ses valeurs pour le calcul de l'état suivant.

 this.setState({
   value: this.state.value + 1 //prone to bugs
 });

Code complet de mon codepen:

class Counter extends React.Component {

  //state = { value: 0 };

  //you can also initialise state in React
  //in the constructor:
  constructor() {
    super();
    this.state = {
      value: 0
    }
  }

  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    })); 
  }

  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));  
  }

  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}


ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

OriginalL'auteur Piotr Berebecki