首頁 > web前端 > js教程 > {useState} HooK { 簡單說明};

{useState} HooK { 簡單說明};

PHPz
發布: 2024-09-10 11:30:14
原創
295 人瀏覽過

{useState} HooK { Briefly Explained};

useState 是一個 React Hook,它允許您透過傳回包含兩個變數的陣列來新增狀態:state、setState。當前狀態以及呼叫時成為 setter 函數的函數。它可用於追蹤應用程式中需要追蹤的資料或屬性,例如字串、數字、布林值、陣列或物件。
例:

const [state, setState] = useState();
登入後複製

簡單來說,狀態會在任何時候發生變化並且需要更新,因此「setState」將更新狀態,隨著時間的推移觸發組件的重新渲染。

此外,useState 可以保存任何類型的 Javascript 值,包括物件。始終記住的一點是,您永遠不應該直接更改處於 React 狀態的物件。首先,您需要建立一個新副本或建立現有副本的副本,然後將 State 設定為新副本。例如:

// 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));
};
登入後複製

要在React 元件中使用useState,首先需要從React 匯入它,方法是在元件頁面頂部以兩種不同的方式編寫以下程式碼,兩種方式都可以完美地讓你可以選擇你的毒藥。

import React from 'react'; 
import {useState} from 'react';
登入後複製

或是你可以寫一行

import React, {useState} from 'react';
登入後複製

React Hook useState 可以在元件的頂層或自訂鉤子內調用,但不能在循環或條件內調用。

const [initialState, setInitialState] = useState();
登入後複製

initialState 僅在初始渲染期間使用,在後續渲染中將被忽略。

以上是{useState} HooK { 簡單說明};的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板