Pourquoi utiliser useState au lieu de simples variables dans React

Pourquoi utiliser useState au lieu de simples variables dans React

Vous êtes-vous déjà demandé pourquoi nous utilisons useState au lieu de simplement des variables dans React ? Explorons ce concept avec un contre-exemple simple.

Un contre-exemple simple

Imaginez que nous ayons un compteur de base avec deux boutons : un pour augmenter le décompte et un pour le diminuer. Si nous créons ce compteur en utilisant useState, cela fonctionne parfaitement. Cependant, si nous essayons d’utiliser uniquement une variable normale, cela ne fonctionne pas comme prévu.

import React, { useState } from 'react';

function Counter() {
  // Using useState to create a state variable
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

export default Counter;

Qu’est-ce que useState ?

useState est un hook dans React qui vous permet d'ajouter un état aux composants fonctionnels. Un état est comme une mémoire que le composant utilise pour mémoriser des éléments et les mettre à jour au fil du temps.

Pourquoi les variables ne fonctionnent pas

La raison pour laquelle l'utilisation d'une variable ne fonctionne pas est que React ne suit pas les modifications dans une variable normale comme il le fait avec l'état géré par useState. Lorsque vous cliquez sur le bouton d'augmentation ou de diminution, useState informe React que l'état a changé. React restitue ensuite le composant et met à jour le décompte.

Cependant, avec une variable régulière, React n'est pas au courant des changements, il ne met donc pas à jour le décompte.

import React from 'react';

function Counter() {
  // Using a regular variable
  let count = 0;

  const increase = () => {
    count += 1;
  };

  const decrease = () => {
    count -= 1;
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

Conclusion

J'espère que vous comprenez maintenant pourquoi useState est essentiel pour la gestion de l'état dans React. Il permet à React de suivre les modifications et de mettre à jour le composant en conséquence. Merci pour votre temps et à bientôt !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!