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

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

PHPz
Libérer: 2024-09-10 11:30:14
original
304 Les gens l'ont consulté

{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();
Copier après la connexion

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));
};
Copier après la connexion

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';
Copier après la connexion

ou vous pouvez écrire sur une seule ligne

import React, {useState} from 'react';
Copier après la connexion

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();
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal