Je sais que l'état nous permet de créer des composants dynamiques et interactifs, mais je veux approfondir l'état.

Quelqu'un peut-il m'aider à comprendre l'état dans React en utilisant un exemple réel?

4
Jon 26 janv. 2019 à 18:41

5 réponses

Meilleure réponse
import React from 'react';

class App extends React.Component {
  state = {
    count: 0
  };

  render() {
    return (
      <div>
        <h1>Hello world</h1>
        <h2>Count: {this.state.count}</h2>
        <button
          onClick={() => this.setState(state => ({ count: state.count + 1 }))}
        >
          +
        </button>
        <button
          onClick={() => this.setState(state => ({ count: state.count - 1 }))}
        >
          -
        </button>
      </div>
    );
  }
}

export default App;

Dans le code ci-dessus, il a un objet state avec property/state: count.

L'état peut simplement être compris comme une valeur à ce moment précis du composant / application particulier. Dans l'exemple ci-dessus, lorsque l'application est exécutée pour la première fois, l'application a l'état count === 0

Comme nous pouvons le voir, il y a deux boutons + et - qui mettent à jour la valeur en utilisant this.setState, il met simplement à jour "l'état" du nombre pour l'application, et l'application sera de nouveau rendue , chaque fois que l'état change

6
Isaac 26 janv. 2019 à 15:51

État dans un exemple réel:

Avant que quelqu'un ait voté pour votre question, vous pouvez imaginer votre question ou la penser comme le composant de question avait vote state = 0 et après cela, il est devenu 1 et ainsi de suite. L'interactivité avec l'application a donc changé quelque chose dans l'application. Cela a changé quelque chose / valeur peut être appelé état.

L'état de l'application / du composant peut changer en raison de l'interactivité (événement) ou au cours du temps.

Au fil du temps, vous pouvez imaginer ce message ou Post Component avant 30 minutes / il y a quelque temps n'avait pas de réponse, c'est-à-dire answer state = 0. Et maintenant, il a quelques (3) réponses. Donc answer state = 0 a été remplacé par answer state = 3.

L'état est simplement une valeur dans laquelle se trouve un composant / une application à un moment donné.

Imaginez simplement le moment précis où vous avez posté cette question et voyez maintenant les changements dans cet article. Ces changements peuvent être considérés comme un changement dans l'état du composant / de l'application.

3
anonymous 26 janv. 2019 à 19:36

State vous permet de créer des composants dynamiques et interactifs.

Il contient des informations sur l'état actuel de l'application. Vous pouvez conserver vos variables et vos données dans l'état local de l'application React en faisant,

class App extends Component{
    state = {
        didUserLogin: false
    }
}

Ensuite, vous pouvez accéder directement à l'état en utilisant,

    console.log(this.state.didUserLogin);

Ou mettez-le à jour avec,

    this.setState({didUserLogin: true});

Au fur et à mesure que vous manipulez les données à l'intérieur de l'état, les composants qui utilisent l'état seront mis à jour avec les informations que vous avez fournies pour l'état.

Plus d'information,

0
Fatih Aktaş 26 janv. 2019 à 18:42

L'état est une instance de React Component Class peut être défini comme un objet d'un ensemble de propriétés observables qui contrôlent le comportement du composant. En d'autres termes, l'état d'un composant est un objet contenant des informations susceptibles de changer au cours de la durée de vie du composant. Par exemple, pensons à l'horloge que nous avons créée dans cet article, nous appelions explicitement la méthode render () toutes les secondes, mais React fournit un meilleur moyen d'obtenir le même résultat en utilisant State, en stockant la valeur de time en tant que membre de l'état du composant. Nous examinerons cela plus en détail plus loin dans l'article.

0
Abdulbaqi 12 juin 2019 à 18:28

Par exemple:

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  state = {
    show: false,
  }

  showTextToggle = () => {
    this.setState({ show: !this.state.show });
  }

  render() {
    const { show } = this.state;
    return (
      <div>
        <h3>Some title</h3>
        {show ? <div>Description</div> : undefined}
        <button onClick={this.showTextToggle}>Read more</button>
      </div>
    )
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

P.S. CodeSandBox

4
meine 26 janv. 2019 à 15:56