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!