Maison >interface Web >js tutoriel >{useState} HooK { brièvement expliqué} ;

{useState} HooK { brièvement expliqué} ;

PHPz
PHPzoriginal
2024-09-10 11:30:14321parcourir

{useState} HooK { Briefly Explained};

useState est un Hook React qui vous permet d'ajouter un état à vos composants en renvoyant un tableau avec deux variables : state, setState. L'état actuel et la fonction qui devient la fonction setter lorsqu'elle est appelée. Il peut être utilisé pour suivre des données ou des propriétés qui doivent être suivies dans une application, telles que des chaînes, des nombres, des booléens, des tableaux ou des objets.
Exemple :

const [state, setState] = useState();

En termes simples, l'état changera à tout moment et doit être mis à jour, donc 'setState' mettra à jour l'état, déclenchant un nouveau rendu de vos composants au fil du temps.

De plus, useState peut contenir tout type de valeur Javascript, y compris des objets. Quelque chose à garder TOUJOURS à l’esprit est que vous ne devez jamais modifier directement les objets que vous détenez dans l’état React. Tout d’abord, vous devez en créer un nouveau ou créer une copie d’un existant, puis définir State sur la nouvelle copie. Par exemple :

// Objects
const [state, setState] = useState({name: 'Marlo', age: 56});

const updateName = () => {
  setState({...state, name: 'Karlo'});
};

const updateAge = () => {
  setState({...state, age: 96});
};
---------------------------------------------------------------------------------
// Arrays
const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
  setArray([...array, 6]);
};

const removeItem = () => {
  setArray(array.slice(0, array.length - 1));
};

Pour utiliser useState dans un composant React, vous devez d'abord l'importer depuis React en écrivant le code suivant en haut de la page du composant de deux manières différentes, les deux fonctionnent parfaitement pour que vous puissiez choisir votre poison.

import React from 'react'; 
import {useState} from 'react';

ou vous pouvez écrire sur une seule ligne

import React, {useState} from 'react';

React Hook useState peut être appelé au niveau supérieur d'un composant ou dans des hooks personnalisés, mais pas à l'intérieur de boucles ou de conditions.

const [initialState, setInitialState] = useState();

l'état initial n'est utilisé que lors du rendu initial et sera ignoré dans les rendus suivants.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn