useState是 React提供的一個Hook函數，用于在函數組件中添加和管理狀態。它允許你在函數組件中定義一個可變的狀態，并在組件的生命周期中對狀態進行更新和訪問。
使用useState可以避免使用類組件時需要定義和管理繁瑣的constructor，state和setState。它簡化了狀態管理的過程，使得函數組件的寫法更加簡潔和易于理解。
useState的基本用法如下：
import React, { useState } from 'react';function MyComponent() {// 使用useState定義狀態和更新狀態的函數const [count, setCount] = useState(0);// 在組件中使用狀態return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increase</button><button onClick={() => setCount(count - 1)}>Decrease</button></div>);
}
使用useState定義了一個名為count的狀態變量和一個名為setCount的用于更新該狀態的函數。
useState返回一個數組，數組的第一個元素是當前狀態的值，而第二個元素是用于更新狀態的函數。使用數組解構賦值方式，將這兩個值分別賦給count和setCount。
可以在組件內部使用count變量來展示當前的計數值，而通過調用setCount函數來更新計數值。每次狀態更新時，React會自動重新渲染組件以反映新的狀態值。
需要注意的是，在調用setCount函數時，我們可以傳遞一個新的值給它，也可以使用函數式更新的方式，接收到當前狀態的值并返回基于當前狀態計算出的新值。
這就是useState的，它是React函數組件中進行狀態管理的重要工具之一。
什么時候需要使用 useState()
在React函數組件中，有一些情況下你可能需要使用useState來管理狀態。
- 組件內部需要維護和更新數據：如果你的組件需要維護一些數據，并在用戶操作或其他事件觸發時更新這些數據，那么可以使用
useState來定義并更新這些狀態。 - 需要在UI中顯示和使用組件的狀態：
useState可以幫助你在組件的渲染過程中展示狀態的值，以便讓用戶看到這些數據。你可以將狀態的值直接插入到JSX中，實時地反映狀態的變化。 - 局部狀態管理：
useState適用于組件內部的局部狀態管理，即只在當前組件中維護和使用狀態。如果你只需要在當前組件內部使用狀態，并不需要在其他組件間共享這些狀態，那么useState是個很好的選擇。 - 業務邏輯相對簡單：
useState適合管理相對簡單的狀態。當狀態的邏輯較為復雜、需要依賴多個狀態或需要進行大量計算時，你可能需要考慮使用其他更適合的狀態管理方案，比如使用useReducer或使用全局狀態管理庫。
總之，當你需要在React函數組件中管理某個組件內部的局部狀態，并希望在UI中顯示和使用這些狀態時，可以使用useState來定義和更新狀態。它是React提供的一種簡單、輕量級的狀態管理方案。
示例：
挑戰:?修復卡住的輸入表單
State：組件的記憶 – React 中文文檔 (docschina.org)
當你輸入字段時，什么也沒有出現。這就像輸入值被空字符串給“卡住”了。第一個 <input> 的 value 設置為始終匹配 firstName 變量，第二個 <input> 的 value 設置為始終匹配 lastName 變量。這是對的。兩個輸入框都有 onChange 事件處理函數，它嘗試根據最新的用戶輸入（e.target.value）更新變量。但是，變量似乎并沒有在重新渲染時“記住”它們的值。通過使用 state 變量來解決此問題。
問題代碼：
export default function Form() {let firstName = '';let lastName = '';function handleFirstNameChange(e) {firstName = e.target.value;}function handleLastNameChange(e) {lastName = e.target.value;}function handleReset() {firstName = '';lastName = '';}return (<form onSubmit={e => e.preventDefault()}><inputplaceholder="First name"value={firstName}onChange={handleFirstNameChange}/><inputplaceholder="Last name"value={lastName}onChange={handleLastNameChange}/><h1>Hi, {firstName} {lastName}</h1><button onClick={handleReset}>Reset</button></form>);
}答案：
首先，從 React 導入 useState。然后用 useState 聲明的 state 變量替換 firstName 和 lastName。最后，用 setFirstName(...) 替換每個 firstName = ... 賦值，并對 lastName 做同樣的事情。不要忘記更新 handleReset，以使重置按鈕生效。
const [firstName, setFirstName] = useState('');const [lastName, setLastName] = useState('');
什么時候不需要使用 useState()
useState是React中管理狀態的常見方式，但并不是在所有情況下都應該使用它。以下是一些情況下可以考慮不使用useState的情況：
- 不需要狀態管理：如果你的組件沒有需要更新和共享的狀態，或者只有一次性的操作，那么使用
useState可能會顯得多余。在這種情況下，你可以簡單地使用函數組件來展示靜態內容。 - 使用其他狀態管理庫：如果你正在使用其他的狀態管理庫（如Redux或MobX），并且已經通過這些庫進行了全局狀態的管理，那么在一個局部的組件中使用
useState可能會導致狀態的冗余和不一致。在這種情況下，你可以通過和狀態管理庫進行配合來管理組件的狀態。 - 需要共享狀態：如果你需要在多個組件之間共享狀態，而不僅僅是在單個組件內部使用，那么
useState可能無法滿足需求。在這種情況下，你可以考慮使用更高級的狀態管理方案，如全局狀態管理庫或上下文（Context）來管理共享狀態。 - 需要復雜的狀態更新邏輯：如果你的狀態更新邏輯相對復雜，或者需要依賴于其他狀態的更新結果，那么僅使用
useState可能會導致代碼變得混亂和難以維護。在這種情況下，你可以考慮自定義Hook或使用useReducer來更好地管理狀態更新邏輯。
總之，useState是React中一種常見的狀態管理方式，但它并不是適用于所有情況的唯一選擇。根據具體的場景和需求，你可以自由選擇適合的狀態管理方案。
示例代碼：
例如以下代碼是不需要使用 useState
import { useState } from 'react';export default function FeedbackForm() {const [name, setName] = useState('');function handleClick() {setName(prompt('What is your name?'));alert(`Hello, ${name}!`);}return (<button onClick={handleClick}>Greet</button>);
}
修改后：
直接 let 變量聲明即可
// import { useState } from 'react';export default function FeedbackForm() {// const [name, setName] = useState('');function handleClick() {const name = (prompt('What is your name?'));alert(`Hello, ${name}!`);}return (<button onClick={handleClick}>Greet</button>);
}
