web-dev-qa-db-fra.com

Quel est useState () dans React?

J'apprends actuellement le concept de crochets dans React et j'essaie de comprendre l'exemple ci-dessous.

    import { useState } from 'react';

    function Example() {
        // Declare a new state variable, which we'll call "count"
        const [count, setCount] = useState(0);

      return (
         <div>
            <p>You clicked {count} times</p>
           <button onClick={() => setCount(count + 1)}>
               Click me
           </button>
        </div>
     );
 }

L'exemple ci-dessus incrémente le compteur sur le paramètre de fonction de gestionnaire lui-même. Et si je veux modifier la valeur de compte dans la fonction de gestionnaire d'événements

Considérons ci-dessous l'exemple

    setCount = () => {
        //how can I modify count value here. Not sure if I can use setState to modify its value
        //also I want to modify other state values as well here. How can I do that
    }

    <button onClick={() => setCount()}>
               Click me
     </button>
javascriptreactjsreact-nativereact-hooks
34
Hemadri Dasari

Les crochets React sont un nouveau moyen (encore en cours de développement) d’accéder aux fonctionnalités de base de react, telles que state sans avoir à utiliser de classes, dans votre exemple si vous souhaitez incrémenter un compteur directement dans la fonction de gestionnaire sans la spécifier directement dans la propriété onClick, vous pouvez faire quelque chose comme:

...
const [count, setCounter] = useState(0);
const [moreStuff, setMoreStuff] = useState(...);
...

const setCount = () => {
    setCounter(count + 1);
    setMoreStuff(...);
    ...
};

et onClick:

<button onClick={setCount}>
    Click me
</button>

Expliquons rapidement ce qui se passe dans cette ligne: 

const [count, setCounter] = useState(0);

useState(0) renvoie un tuple dans lequel le premier paramètre count est l'état actuel du compteur et setCounter est la méthode permettant d'actualiser l'état du compteur. Nous pouvons utiliser la méthode setCounter pour mettre à jour l'état de count n'importe où - Dans ce cas, nous l'utilisons à l'intérieur de la fonction setCount où nous pouvons faire plus de choses; L'idée avec les hooks est que nous sommes en mesure de garder notre code plus fonctionnel et d'éviter les composants basés sur les classes s'ils ne sont pas désirés/nécessaires.

J'ai écrit un article complet sur les hooks avec plusieurs exemples (y compris les compteurs) tels que this codepen , j'ai utilisé useState, useEffect, useContext, et des crochets personnalisés . Je pourrais entrer dans plus de détails sur le fonctionnement des crochets sur cette réponse, mais la documentation explique très bien crochet de l'État et d'autres crochets en détail. J'espère que cela vous aidera.

mise à jour: Les crochets ne sont plus une proposition , depuis la version 16.8 ils sont maintenant disponibles, il existe une section dans le site de React qui répond à certains des FAQ .

32
Enmanuel Duran

useState est l'un des crochets de réaction intégrés disponibles dans la version 0.16.7.

useState ne doit être utilisé que dans les composants fonctionnels. useState est la solution si nous avons besoin d'un état interne et ne devons pas implémenter une logique plus complexe telle que les méthodes de cycle de vie.

const [state, setState] = useState(initialState);

Renvoie une valeur avec état et une fonction pour la mettre à jour.

Lors du rendu initial, l'état renvoyé (état) est identique à la valeur transmise comme premier argument (initialState).

La fonction setState est utilisée pour mettre à jour l'état. Il accepte une nouvelle valeur d'état et met en file d'attente une nouvelle restitution du composant.

Veuillez noter que useState appel de hook pour mettre à jour l'état se comporte différemment que les composants this.setState. Pour vous montrer la différence, j'ai préparé deux exemples.

class UserInfoClass extends React.Component {
  state = { firstName: 'John', lastName: 'Doe' };
  
  render() {
    return <div>
      <p>userInfo: {JSON.stringify(this.state)}</p>
      <button onClick={() => this.setState({ 
        firstName: 'Jason'
      })}>Update name to Jason</button>
    </div>;
  }
}

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo({ firstName: 'Jason' })}>Update name to Jason</button>
    </div>
  );
}

ReactDOM.render(
  <div>
    <UserInfoClass />
    <UserInfoFunction />
  </div>
, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Un nouvel objet est créé lorsque setUserInfo callback est utilisé. Notez que nous avons perdu la valeur de la clé lastName. Pour fixer que nous pourrions passer la fonction dans useState.

setUserInfo(prevState => ({ ...prevState, firstName: 'Jason' })

Voir exemple: 

// Please note that new object is created when setUserInfo callback is used
function UserInfoFunction() {
  const [userInfo, setUserInfo] = React.useState({ 
    firstName: 'John', lastName: 'Doe',
  });

  return (
    <div>
      <p>userInfo: {JSON.stringify(userInfo)}</p>
      <button onClick={() => setUserInfo(prevState => ({
        ...prevState, firstName: 'Jason' }))}>
        Update name to Jason
      </button>
    </div>
  );
}

ReactDOM.render(
    <UserInfoFunction />
, document.querySelector('#app'));
<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>

<div id="app"></div>

Contrairement à la méthode setState trouvée dans les composants de classe, useState ne fusionne pas automatiquement les objets de mise à jour. Vous pouvez répliquer ce comportement en combinant le formulaire de fonction de mise à jour de fonction avec la syntaxe d'étalement d'objet:

setState(prevState => {
  // Object.assign would also work
  return {...prevState, ...updatedValues};
});

Pour plus d'informations sur useState voir documentation officielle .

16
loelsonk

useState est l'un des crochets disponibles dans React v16.8.0. En gros, il vous permet de transformer vos composants fonctionnels/non statiques en un composant pouvant avoir son propre état.

Au niveau de base, il est utilisé de la manière suivante:

const [isLoading, setLoading] = useState(true);

Ceci vous permet ensuite d’appeler setLoading en passant une valeur booléenne. C'est une façon intéressante d'avoir un composant fonctionnel "avec état".

5
John Kennedy

La syntaxe de useState hook est simple.

const [value, setValue] = useState(defaultValue)

Si vous ne connaissez pas cette syntaxe, allez ici .

Je vous recommande de lire le documentation . Il existe d'excellentes explications avec une quantité décente d'exemples.

import { useState } from 'react';

function Example() {
    // Declare a new state variable, which we'll call "count"
    const [count, setCount] = useState(0);
  
  // its up to you how you do it
  const buttonClickHandler = e => {
   // increment
   // setCount(count + 1)
   
   // decrement
   // setCount(count -1)
   
   // anything
   // setCount(0)
  }
  

  return (
       <div>
          <p>You clicked {count} times</p>
         <button onClick={buttonClickHandler}>
             Click me
         </button>
      </div>
   );
 }
5
Jan Ciołek

useState () est un exemple de hook intégré React qui vous permet d'utiliser des états dans vos composants fonctionnels. Cela n'était pas possible avant React 16.7.

La fonction useState est un crochet intégré qui peut être importé à partir du package react. Il vous permet d'ajouter un état à vos composants fonctionnels. En utilisant le hook useState à l'intérieur d'un composant de fonction, vous pouvez créer un élément d'état sans passer aux composants de classe.

REMARQUE: Veuillez noter que les crochets sont actuellement en version alpha et qu'ils ne sont donc pas encore prêts pour la production. Cela signifie également que l'API peut changer.

3
Muhammad Shaheem

Les crochets sont une nouvelle fonctionnalité dans React v16.7.0-alphauseState est le “Crochet”. useState() définit la valeur par défaut de la variable any et gère le composant de fonction (fonctions PureComponent). ex : const [count, setCount] = useState(0); définit la valeur par défaut du compte 0. et vous pouvez utiliser setCount à incriment ou decriment la valeur. onClick={() => setCount(count + 1)} incrémente la valeur de comptage . DOC

3
Asif vora

useState() est un React hook. Les crochets permettent d'utiliser l'état et la mutabilité à l'intérieur des composants de la fonction.

Bien que vous ne puissiez pas utiliser de points d'ancrage dans les classes, vous pouvez envelopper votre composant de classe avec une fonction et utiliser les points d'ancrage correspondants. C'est un excellent outil pour migrer des composants d'une classe à une forme fonctionnelle. Voici un exemple complet:

Pour cet exemple, je vais utiliser un composant de compteur. Ça y est:

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: props.count };
  }
  
  inc() {
    this.setState(prev => ({count: prev.count+1}));
  }
  
  render() {
    return <button onClick={() => this.inc()}>{this.state.count}</button>
  }
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

C'est un composant de classe simple avec un état de comptage, et la mise à jour de l'état est effectuée par des méthodes. Ce modèle est très commun dans les composants de classe. La première chose à faire est de l'envelopper avec un composant de fonction portant le même nom, qui délègue toutes ses propriétés au composant encapsulé. Vous devez également rendre le composant encapsulé dans la fonction return. C'est ici:

function Hello(props) {
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => this.inc()}>{this.state.count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'></div>

C'est exactement le même composant, avec le même comportement, le même nom et les mêmes propriétés. Maintenant levons l’état de comptage au composant fonctionnel. Voici comment ça se passe:

function Hello(props) {
  const [count, setCount] = React.useState(0);
  class Hello extends React.Component {
    constructor(props) {
      super(props);
      this.state = { count: props.count };
    }

    inc() {
      this.setState(prev => ({count: prev.count+1}));
    }

    render() {
      return <button onClick={() => setCount(count+1)}>{count}</button>
    }
  }
  return <Hello {...props}/>
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>

Notez que la méthode inc est toujours là, elle ne fera de mal à personne, en fait, c'est du code mort. C’est l’idée, continuez simplement à lever l’état. Une fois que vous avez terminé, vous pouvez supprimer le composant de classe:

function Hello(props) {
  const [count, setCount] = React.useState(0);

  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

ReactDOM.render(<Hello count={0}/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>

<div id='root'></div>

Bien que cela permette d'utiliser des points d'ancrage dans les composants de classe, je ne vous le recommanderais pas, sauf si vous effectuez une migration comme je l'ai fait dans cet exemple. Le mélange des fonctions et des classes fera de la gestion d’état un véritable gâchis. J'espère que ça aide

Meilleures salutations

1
geckos