React useState 使用從基礎(chǔ)到高級(jí)應(yīng)用示例小結(jié)
更新時(shí)間：2025年09月08日 14:50:17 作者：北辰alk
React 的 useState 是一個(gè)內(nèi)置的 Hook,它允許我們在函數(shù)組件中添加和管理狀態(tài),本文給大家介紹React useState 使用從基礎(chǔ)到高級(jí)應(yīng)用示例小結(jié),感興趣的朋友一起看看吧
1. 什么是 useState？
React 的 useState 是一個(gè)內(nèi)置的 Hook，它允許我們在函數(shù)組件中添加和管理狀態(tài)。在 React 16.8 之前，函數(shù)組件只能作為無狀態(tài)組件使用，但有了 Hooks 之后，函數(shù)組件現(xiàn)在可以擁有和類組件相似的狀態(tài)管理能力。
2. useState 基礎(chǔ)用法
2.1 基本語法
import React, { useState } from 'react';
function ExampleComponent() {
// 聲明一個(gè)狀態(tài)變量count，初始值為0
// setCount是更新count的函數(shù)
const [count, setCount] = useState(0);
return (
<div>
<p>你點(diǎn)擊了 {count} 次</p>
<button onClick={() => setCount(count + 1)}>
點(diǎn)擊我
</button>
</div>
);
}2.2 初始化狀態(tài)的多種方式
useState 可以接受任何類型的值作為初始狀態(tài)：
function VariousStateTypes() {
// 數(shù)字類型
const [count, setCount] = useState(0);
// 字符串類型
const [name, setName] = useState('張三');
// 布爾類型
const [isVisible, setIsVisible] = useState(false);
// 數(shù)組類型
const [items, setItems] = useState([]);
// 對(duì)象類型
const [user, setUser] = useState({
name: '李四',
age: 25,
email: 'lisi@example.com'
});
// 函數(shù)類型（惰性初始化）
const [value, setValue] = useState(() => {
// 復(fù)雜的初始化邏輯
const initialValue = localStorage.getItem('myValue');
return initialValue ? JSON.parse(initialValue) : 'default';
});
return <div>示例組件</div>;
}3. useState 的工作原理
為了更好地理解 useState 的工作原理，讓我們看一下它的內(nèi)部機(jī)制流程圖：
React 使用閉包和鏈表的方式來管理組件的狀態(tài)。每個(gè) useState 調(diào)用都會(huì)在組件的"記憶單元"中創(chuàng)建一個(gè)狀態(tài)節(jié)點(diǎn)，這些節(jié)點(diǎn)按照調(diào)用的順序被存儲(chǔ)。
4. 更新狀態(tài)的正確方式
4.1 直接更新 vs 函數(shù)式更新
function Counter() {
const [count, setCount] = useState(0);
// 直接更新（可能有問題）
const incrementDirect = () => {
setCount(count + 1);
setCount(count + 1); // 這不會(huì)工作，因?yàn)閏ount還是舊值
};
// 函數(shù)式更新（推薦）
const incrementFunctional = () => {
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1); // 這會(huì)正確工作
};
return (
<div>
<p>計(jì)數(shù): {count}</p>
<button onClick={incrementDirect}>直接更新 (+2應(yīng)該但不會(huì))</button>
<button onClick={incrementFunctional}>函數(shù)式更新 (+2會(huì)正確工作)</button>
</div>
);
}4.2 對(duì)象和數(shù)組的更新
function UserProfile() {
const [user, setUser] = useState({
name: '王五',
age: 30,
address: {
city: '北京',
street: '朝陽路'
}
});
const [list, setList] = useState([1, 2, 3]);
// 更新對(duì)象 - 錯(cuò)誤方式（會(huì)丟失其他屬性）
const updateNameWrong = (newName) => {
setUser({ name: newName }); // age和address會(huì)丟失！
};
// 更新對(duì)象 - 正確方式
const updateNameCorrect = (newName) => {
setUser(prevUser => ({
...prevUser, // 展開原有屬性
name: newName // 覆蓋需要更新的屬性
}));
};
// 更新嵌套對(duì)象
const updateCity = (newCity) => {
setUser(prevUser => ({
...prevUser,
address: {
...prevUser.address, // 展開嵌套對(duì)象
city: newCity // 更新嵌套屬性
}
}));
};
// 添加數(shù)組元素
const addToList = (item) => {
setList(prevList => [...prevList, item]); // 使用展開運(yùn)算符
};
// 刪除數(shù)組元素
const removeFromList = (index) => {
setList(prevList => prevList.filter((_, i) => i !== index));
};
// 更新數(shù)組元素
const updateListItem = (index, newValue) => {
setList(prevList => prevList.map((item, i) =>
i === index ? newValue : item
));
};
return (
<div>
<p>姓名: {user.name}</p>
<p>城市: {user.address.city}</p>
</div>
);
}5. 常見使用場景和示例
5.1 表單處理
function ContactForm() {
const [formData, setFormData] = useState({
name: '',
email: '',
message: ''
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
// 處理輸入變化
const handleInputChange = (e) => {
const { name, value } = e.target;
setFormData(prevData => ({
...prevData,
[name]: value
}));
// 清除對(duì)應(yīng)字段的錯(cuò)誤
if (errors[name]) {
setErrors(prevErrors => ({
...prevErrors,
[name]: ''
}));
}
};
// 表單驗(yàn)證
const validateForm = () => {
const newErrors = {};
if (!formData.name.trim()) {
newErrors.name = '姓名不能為空';
}
if (!formData.email.trim()) {
newErrors.email = '郵箱不能為空';
} else if (!/\S+@\S+\.\S+/.test(formData.email)) {
newErrors.email = '郵箱格式不正確';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
// 提交表單
const handleSubmit = async (e) => {
e.preventDefault();
if (!validateForm()) {
return;
}
setIsSubmitting(true);
try {
// 模擬API調(diào)用
await new Promise(resolve => setTimeout(resolve, 1000));
console.log('表單提交成功:', formData);
alert('提交成功！');
// 重置表單
setFormData({ name: '', email: '', message: '' });
} catch (error) {
console.error('提交失敗:', error);
} finally {
setIsSubmitting(false);
}
};
return (
<form onSubmit={handleSubmit}>
<div>
<label>姓名:</label>
<input
type="text"
name="name"
value={formData.name}
onChange={handleInputChange}
/>
{errors.name && <span className="error">{errors.name}</span>}
</div>
<div>
<label>郵箱:</label>
<input
type="email"
name="email"
value={formData.email}
onChange={handleInputChange}
/>
{errors.email && <span className="error">{errors.email}</span>}
</div>
<div>
<label>留言:</label>
<textarea
name="message"
value={formData.message}
onChange={handleInputChange}
/>
</div>
<button type="submit" disabled={isSubmitting}>
{isSubmitting ? '提交中...' : '提交'}
</button>
</form>
);
}5.2 計(jì)數(shù)器應(yīng)用
function AdvancedCounter() {
const [count, setCount] = useState(0);
const [history, setHistory] = useState([]);
const [step, setStep] = useState(1);
// 增加計(jì)數(shù)
const increment = () => {
setCount(prevCount => {
const newCount = prevCount + step;
setHistory(prevHistory => [...prevHistory, {
type: 'increment',
from: prevCount,
to: newCount,
step: step,
timestamp: new Date().toISOString()
}]);
return newCount;
});
};
// 減少計(jì)數(shù)
const decrement = () => {
setCount(prevCount => {
const newCount = prevCount - step;
setHistory(prevHistory => [...prevHistory, {
type: 'decrement',
from: prevCount,
to: newCount,
step: step,
timestamp: new Date().toISOString()
}]);
return newCount;
});
};
// 重置計(jì)數(shù)
const reset = () => {
setCount(0);
setHistory(prevHistory => [...prevHistory, {
type: 'reset',
from: count,
to: 0,
timestamp: new Date().toISOString()
}]);
};
// 清除歷史
const clearHistory = () => {
setHistory([]);
};
return (
<div>
<h2>高級(jí)計(jì)數(shù)器</h2>
<div className="counter-controls">
<label>
步長:
<input
type="number"
value={step}
onChange={(e) => setStep(Number(e.target.value))}
min="1"
/>
</label>
<button onClick={decrement}>-{step}</button>
<span className="count-value">{count}</span>
<button onClick={increment}>+{step}</button>
<button onClick={reset}>重置</button>
</div>
<div className="history-section">
<h3>操作歷史</h3>
<button onClick={clearHistory}>清除歷史</button>
{history.length === 0 ? (
<p>暫無操作歷史</p>
) : (
<ul>
{history.map((record, index) => (
<li key={index}>
{new Date(record.timestamp).toLocaleTimeString()} -
從 {record.from} {record.type === 'increment' ? '+' : '-'}
{record.step || ''} 到 {record.to}
</li>
))}
</ul>
)}
</div>
</div>
);
}5.3 自定義 Hook 封裝 useState
// 自定義 Hook: 使用 localStorage 持久化狀態(tài)
function useLocalStorageState(key, defaultValue) {
// 從 localStorage 讀取初始值
const [state, setState] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : defaultValue;
} catch (error) {
console.error(`Error reading localStorage key "${key}":`, error);
return defaultValue;
}
});
// 當(dāng)狀態(tài)變化時(shí)更新 localStorage
const setPersistedState = (value) => {
try {
// 允許值是一個(gè)函數(shù)（與 useState 相同）
const valueToStore = value instanceof Function ? value(state) : value;
setState(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error(`Error setting localStorage key "${key}":`, error);
}
};
return [state, setPersistedState];
}
// 使用自定義 Hook
function ThemeSwitcher() {
const [theme, setTheme] = useLocalStorageState('theme', 'light');
const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};
return (
<div className={`app ${theme}`}>
<h2>當(dāng)前主題: {theme}</h2>
<button onClick={toggleTheme}>
切換主題
</button>
</div>
);
}6. 性能優(yōu)化和最佳實(shí)踐
6.1 避免不必要的重新渲染
// 使用 React.memo 避免不必要的重新渲染
const ExpensiveComponent = React.memo(({ data }) => {
console.log('ExpensiveComponent 渲染了');
return <div>數(shù)據(jù): {data.value}</div>;
});
function OptimizationExample() {
const [count, setCount] = useState(0);
const [data, setData] = useState({ value: '測試數(shù)據(jù)' });
// 使用 useCallback 避免函數(shù)引用變化
const updateData = useCallback(() => {
setData(prevData => ({ ...prevData }));
}, []);
return (
<div>
<p>計(jì)數(shù): {count}</p>
<button onClick={() => setCount(c => c + 1)}>增加計(jì)數(shù)</button>
{/* 這個(gè)組件不會(huì)因?yàn)橛?jì)數(shù)變化而重新渲染 */}
<ExpensiveComponent data={data} />
<button onClick={updateData}>更新數(shù)據(jù)</button>
</div>
);
}6.2 使用 useReducer 處理復(fù)雜狀態(tài)邏輯
當(dāng)狀態(tài)邏輯變得復(fù)雜時(shí)，可以考慮使用 useReducer：
function todoReducer(state, action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, {
id: Date.now(),
text: action.text,
completed: false
}];
case 'TOGGLE_TODO':
return state.map(todo =>
todo.id === action.id
? { ...todo, completed: !todo.completed }
: todo
);
case 'DELETE_TODO':
return state.filter(todo => todo.id !== action.id);
default:
return state;
}
}
function TodoApp() {
const [todos, dispatch] = useReducer(todoReducer, []);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue.trim()) {
dispatch({ type: 'ADD_TODO', text: inputValue });
setInputValue('');
}
};
return (
<div>
<h2>待辦事項(xiàng)</h2>
<input
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTodo()}
/>
<button onClick={addTodo}>添加</button>
<ul>
{todos.map(todo => (
<li key={todo.id}>
<span
style={{
textDecoration: todo.completed ? 'line-through' : 'none'
}}
onClick={() => dispatch({ type: 'TOGGLE_TODO', id: todo.id })}
>
{todo.text}
</span>
<button
onClick={() => dispatch({ type: 'DELETE_TODO', id: todo.id })}
>
刪除
</button>
</li>
))}
</ul>
</div>
);
}7. 常見問題和解決方案
7.1 狀態(tài)更新后立即使用新值
function ImmediateUpdateProblem() {
const [count, setCount] = useState(0);
// 錯(cuò)誤：在狀態(tài)更新后立即使用新值
const incrementProblematic = () => {
setCount(count + 1);
console.log('當(dāng)前計(jì)數(shù):', count); // 這里還是舊值
};
// 正確：使用 useEffect 響應(yīng)狀態(tài)變化
useEffect(() => {
console.log('計(jì)數(shù)已更新:', count);
}, [count]);
// 如果需要基于當(dāng)前狀態(tài)進(jìn)行連續(xù)更新，使用函數(shù)式更新
const incrementTwice = () => {
setCount(prevCount => prevCount + 1);
setCount(prevCount => prevCount + 1); // 這會(huì)正確工作
};
return (
<div>
<p>計(jì)數(shù): {count}</p>
<button onClick={incrementProblematic}>有問題的方式</button>
<button onClick={incrementTwice}>增加兩次</button>
</div>
);
}7.2 處理異步狀態(tài)更新
function AsyncStateUpdate() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const fetchData = async () => {
setLoading(true);
setError(null);
try {
// 模擬API調(diào)用
const response = await new Promise((resolve, reject) => {
setTimeout(() => {
Math.random() > 0.2
? resolve({ message: '數(shù)據(jù)獲取成功!' })
: reject(new Error('獲取數(shù)據(jù)失敗'));
}, 1000);
});
setData(response);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
return (
<div>
<button onClick={fetchData} disabled={loading}>
{loading ? '加載中...' : '獲取數(shù)據(jù)'}
</button>
{error && <div className="error">錯(cuò)誤: {error}</div>}
{data && <div>數(shù)據(jù): {data.message}</div>}
</div>
);
}8. 總結(jié)
React 的 useState Hook 是函數(shù)組件狀態(tài)管理的核心工具。通過本文的學(xué)習(xí)，你應(yīng)該已經(jīng)掌握了：
- useState 的基本用法和語法
- 如何正確更新各種類型的狀態(tài)（數(shù)字、字符串、對(duì)象、數(shù)組）
- 狀態(tài)更新的最佳實(shí)踐（函數(shù)式更新、不可變數(shù)據(jù)）
- 常見使用場景和示例（表單處理、計(jì)數(shù)器等）
- 性能優(yōu)化技巧和自定義 Hook
- 常見問題的解決方案
記住，useState 雖然簡單易用，但要真正掌握它需要理解其工作原理和最佳實(shí)踐。隨著你對(duì) React 的深入使用，你會(huì)發(fā)現(xiàn) useState 與其他 Hook（如 useEffect、useContext、useReducer）的組合使用能解決各種復(fù)雜的狀態(tài)管理問題。
繼續(xù)練習(xí)并在實(shí)際項(xiàng)目中應(yīng)用這些知識(shí)，你會(huì)逐漸成為 React 狀態(tài)管理的高手！
到此這篇關(guān)于React useState 使用詳解：從基礎(chǔ)到高級(jí)應(yīng)用的文章就介紹到這了,更多相關(guān)React useState 使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react-router browserHistory刷新頁面404問題解決方法
本篇文章主要介紹了react-router browserHistory刷新頁面404問題解決方法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-12-12
React?useEffect異步操作常見問題小結(jié)
本文主要介紹了React?useEffect異步操作常見問題小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
react打包優(yōu)化和本地預(yù)覽的實(shí)現(xiàn)
本文主要介紹了react打包優(yōu)化和本地預(yù)覽的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-07-07
詳解react native頁面間傳遞數(shù)據(jù)的幾種方式
這篇文章主要介紹了詳解react native頁面間傳遞數(shù)據(jù)的幾種方式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了React項(xiàng)目中碰到的IE問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
react 頁面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件的兩種操作方法
這篇文章主要介紹了react 頁面加載完成后自動(dòng)執(zhí)行標(biāo)簽的點(diǎn)擊事件,本文給大家分享兩種操作方法結(jié)合示例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-12-12
react axios配置代理(proxy),如何解決本地開發(fā)時(shí)的跨域問題
這篇文章主要介紹了react axios配置代理(proxy),如何解決本地開發(fā)時(shí)的跨域問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了React組件三大屬性之state,props,refs,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07
這篇文章主要為大家介紹了React.js源碼解析setState流程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
在react面試中，面試官經(jīng)常會(huì)問我們一些關(guān)于react的生命周期問題，今天特此分享本文給大家詳細(xì)介紹下，感興趣的朋友跟隨小編一起看看吧2021-08-08