資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時裝學
法律學ReactJS – useState 鉤子
在本文中，我們將瞭解如何在函式式元件中使用 useState 鉤子。
State 是資料來源的地方。我們應該始終努力讓 state 儘可能簡單。使用 React 16.8，釋出了允許我們以更少的編碼來處理 state 的鉤子。
語法
const [state, setState] = useState(initialstate)
它接受兩個引數——state 和 setState。State 是當前 state，而 setState 用於更改函式式元件的 state。
在每次 state 更改時，元件都會使用更新後的 state 重新渲染。
示例
在此示例中，我們將構建一個 React 應用程式，該應用程式在單擊按鈕時會更改某個函式式元件的 state，並重新渲染它。
App.jsx
import React, { useState } from 'react';
function App() {
const [click, setClick] = useState(0);
return (
<div>
<p>Button clicked {click} times</p>
<button onClick={() => setClick((prev)=> prev + 1)}>Click me</button>
</div>
);
}
export default App;在上示例中，物件 state 可透過以下兩種方法更改 -
setClick((prev)=>prev + 1)}
setClick(click + 1)}
在第二個選項中，狀態透過將值增加 1 來更新，但這並不能確保值被新增到之前更新的狀態中。而在第一個選項中，確保值僅新增到之前更新的狀態值。
輸出
這將產生以下結果。
更新於： 19-Mar-2021
356 次瀏覽
廣告