React
Etat en réaction

État de base

L'état dans les composants React est essentiel pour gérer et communiquer les données dans votre application. Il est représenté comme un objet JavaScript et a une portée au niveau des composants , il peut être considéré comme les données privées de votre composant.

Dans l'exemple ci-dessous, nous définissons un état initial dans la fonction constructor de notre composant et l'utilisons dans la fonction de render .

class ExampleComponent extends React.Component {
  constructor(props){
    super(props);

    // Set-up our initial state
    this.state = {
      greeting: 'Hiya Buddy!'
    };
  }

  render() {
    // We can access the greeting property through this.state
    return(
      <div>{this.state.greeting}</div>
    );
  }
}

setState ()

La principale méthode de mise à jour de l'interface utilisateur pour vos applications React consiste à appeler la fonction setState() . Cette fonction effectuera une fusion superficielle entre le nouvel état que vous fournissez et l'état précédent, et déclenchera un re-rendu de votre composant et de tous les décédés.

Paramètres

1. updater : il peut s'agir d'un objet avec un nombre de paires clé-valeur à fusionner dans l'état ou une fonction renvoyant un tel objet.
2. callback (optional) : une fonction qui sera exécutée après l'exécution de setState() . En raison du fait que React ne garantit pas que les appels à setState() sont atomiques, cela peut parfois être utile si vous souhaitez effectuer une action après avoir été setState() que setState() a été exécuté avec succès.

Usage:

Le setState procédé accepte une updater à prevState props updater argument qui peut être soit un objet avec un nombre de clé-valeur paires qui doit être fusionné dans l'état, ou une fonction qui renvoie un tel objet calculé à partir de prevState et props .

Utiliser setState() avec un objet comme updater de updater à updater

//
// An example ES6 style component, updating the state on a simple button click.
// Also demonstrates where the state can be set directly and where setState should be used.
//
class Greeting extends React.Component {
    constructor(props) {
        super(props);
        this.click = this.click.bind(this);
        // Set initial state (ONLY ALLOWED IN CONSTRUCTOR)
        this.state = {
            greeting: 'Hello!'
        };
    }
    click(e) {
        this.setState({
              greeting: 'Hello World!'
        });
    }
    render() {
        return(
            <div>
                <p>{this.state.greeting}</p>
                <button onClick={this.click}>Click me</button>
            </div>
        );
    }
    
}

Utiliser setState() avec une fonction comme updater de updater à updater

//
// This is most often used when you want to check or make use 
// of previous state before updating any values.
//

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

Cela peut être plus sûr que d'utiliser un argument d'objet dans lequel plusieurs appels à setState() sont utilisés, car plusieurs appels peuvent être regroupés par React et exécutés en même temps.

this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });
this.setState({ counter: this.state.counter + 1 });

Ces appels peuvent être regroupés par React en utilisant Object.assign() , ce qui fait que le compteur est incrémenté de 1 plutôt que de 3.

L'approche fonctionnelle peut également être utilisée pour déplacer la logique de réglage d'état en dehors des composants. Cela permet d'isoler et de réutiliser la logique d'état.

// Outside of component class, potentially in another file/module

function incrementCounter(previousState, currentProps) {
    return {
        counter: previousState.counter + 1
    };
}

// Within component

this.setState(incrementCounter);

Appel de setState() avec un objet et une fonction de rappel

//
// 'Hi There' will be logged to the console after setState completes
//

this.setState({ name: 'John Doe' }, console.log('Hi there'));

Antipattern commun

Vous ne devriez pas enregistrer les props dans l' state . C'est considéré comme un anti-modèle . Par exemple:

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            url: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            url: this.props.url + '/days=?' + e.target.value
        });
    }

    componentWillMount() {
        this.setState({url: this.props.url});
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.state.url}
            </div>
        )
    }
}

L' url prop est enregistrée dans l' state , puis modifiée. Au lieu de cela, choisissez d'enregistrer les modifications dans un état, puis créez le chemin d'accès complet en utilisant à la fois l' state et les props :

export default class MyComponent extends React.Component {
    constructor() {
        super();

        this.state = {
            days: ''
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(e) {
        this.setState({
            days: e.target.value
        });
    }

    render() {
        return (
            <div>
                <input defaultValue={2} onChange={this.onChange} />

                URL: {this.props.url + '/days?=' + this.state.days}
            </div>
        )
    }
}

En effet, dans une application React, nous voulons avoir une seule source de vérité - c’est-à-dire que toutes les données sont la responsabilité d’un seul composant et d’un seul composant. Il est de la responsabilité de ce composant de stocker les données dans son état et de distribuer les données à d'autres composants via des accessoires.

Dans le premier exemple, la classe MyComponent et son parent conservent "url" dans leur état. Si nous mettons à jour state.url dans MyComponent, ces modifications ne sont pas reflétées dans le parent. Nous avons perdu notre source unique de vérité et il devient de plus en plus difficile de suivre le flux de données grâce à notre application. En comparaison avec le deuxième exemple - l'url est uniquement maintenu dans l'état du composant parent et utilisé comme un prop dans MyComponent - nous conservons donc une source unique de vérité.

État, événements et contrôles gérés

Voici un exemple d'un composant React avec un champ de saisie "géré". Chaque fois que la valeur du champ d'entrée change, un gestionnaire d'événements est appelé et met à jour l'état du composant avec la nouvelle valeur du champ d'entrée. L'appel à setState dans le gestionnaire d'événements déclenchera un appel pour render mise à jour du composant dans le dom.

import React from 'react';
import {render} from 'react-dom';


class ManagedControlDemo extends React.Component {

  constructor(props){
    super(props);
    this.state = {message: ""};
  }

  handleChange(e){
    this.setState({message: e.target.value});
  }

  render() {
    return (
      <div>
        <legend>Type something here</legend>
          <input 
            onChange={this.handleChange.bind(this)} 
            value={this.state.message} 
            autoFocus />
        <h1>{this.state.message}</h1>
      </div>
   );
  } 
}


render(<ManagedControlDemo/>, document.querySelector('#app'));

Il est très important de noter le comportement à l'exécution. Chaque fois qu'un utilisateur modifie la valeur dans le champ de saisie

• handleChange sera appelé et ainsi
• setState sera appelé et ainsi
• render s'appellera

Pop quiz, après avoir tapé un caractère dans le champ de saisie, quels éléments DOM changent

1. tout cela - le div, la légende, l’entrée, le h1
2. seulement l'entrée et h1
3. rien
4. Qu'est-ce qu'un DOM?

Vous pouvez expérimenter cela plus ici pour trouver la réponse