React?Hooks之useState,useEffect及自定義Hook的最佳實踐
更新時間：2025年09月04日 09:03:23 作者：天天進步2015
React?Hooks自16.8版本引入以來,徹底改變了我們編寫React組件的方式,本文將深入探討三個最重要的Hooks：useState、useEffect,以及如何創(chuàng)建和使用自定義Hooks,感興趣的小伙伴可以了解下
React Hooks自16.8版本引入以來，徹底改變了我們編寫React組件的方式。它們讓函數(shù)組件擁有了狀態(tài)管理和生命周期方法的能力，使代碼更加簡潔、可復(fù)用且易于測試。本文將深入探討三個最重要的Hooks：useState、useEffect，以及如何創(chuàng)建和使用自定義Hooks。
1. useState：狀態(tài)管理的基石
基礎(chǔ)用法
useState是最基礎(chǔ)也是最常用的Hook，它讓函數(shù)組件能夠擁有內(nèi)部狀態(tài)。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>當(dāng)前計數(shù): {count}</p>
<button onClick={() => setCount(count + 1)}>
增加
</button>
</div>
);
}
狀態(tài)更新的最佳實踐
1. 使用函數(shù)式更新
當(dāng)新狀態(tài)依賴于舊狀態(tài)時，推薦使用函數(shù)式更新：
// ? 不推薦：直接使用狀態(tài)值 setCount(count + 1); // ? 推薦：使用函數(shù)式更新 setCount(prevCount => prevCount + 1);
函數(shù)式更新的優(yōu)勢在于確保獲取到最新的狀態(tài)值，避免閉包陷阱。
2. 合并對象狀態(tài)
useState不會自動合并對象，需要手動合并：
const [user, setUser] = useState({
name: '',
email: '',
age: 0
});
// ? 錯誤：會覆蓋整個對象
setUser({ name: 'Alice' });
// ? 正確：手動合并
setUser(prevUser => ({
...prevUser,
name: 'Alice'
}));
3. 初始狀態(tài)的惰性計算
對于復(fù)雜的初始狀態(tài)計算，使用惰性初始化：
// ? 每次渲染都會執(zhí)行計算 const [expensiveValue, setExpensiveValue] = useState(computeExpensiveValue()); // ? 只在初始化時執(zhí)行一次 const [expensiveValue, setExpensiveValue] = useState(() => computeExpensiveValue());
2. useEffect：副作用管理專家
基礎(chǔ)概念
useEffect用于處理組件的副作用，如數(shù)據(jù)獲取、訂閱、手動修改DOM等。
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchUser() {
setLoading(true);
try {
const response = await fetch(`/api/users/${userId}`);
const userData = await response.json();
setUser(userData);
} catch (error) {
console.error('獲取用戶信息失敗:', error);
} finally {
setLoading(false);
}
}
fetchUser();
}, [userId]); // 依賴數(shù)組
if (loading) return <div>加載中...</div>;
if (!user) return <div>用戶未找到</div>;
return (
<div>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
);
}
依賴數(shù)組的深度理解
1. 空依賴數(shù)組
useEffect(() => {
// 只在組件掛載時執(zhí)行一次
console.log('組件已掛載');
}, []); // 空數(shù)組
2. 無依賴數(shù)組
useEffect(() => {
// 每次渲染后都執(zhí)行
console.log('每次渲染后執(zhí)行');
}); // 無依賴數(shù)組
3. 有依賴的數(shù)組
useEffect(() => {
// 當(dāng)count或name發(fā)生變化時執(zhí)行
console.log('count或name發(fā)生了變化');
}, [count, name]); // 依賴count和name
清理副作用
對于需要清理的副作用（如定時器、訂閱），useEffect可以返回一個清理函數(shù)：
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
// 返回清理函數(shù)
return () => {
clearInterval(intervalId);
};
}, []); // 只設(shè)置一次定時器
return <div>已運行 {seconds} 秒</div>;
}
useEffect的最佳實踐
1. 合理拆分effect
將不同關(guān)注點的副作用分離到不同的useEffect中：
function UserDashboard({ userId }) {
const [user, setUser] = useState(null);
const [posts, setPosts] = useState([]);
// 獲取用戶信息
useEffect(() => {
fetchUser(userId).then(setUser);
}, [userId]);
// 獲取用戶帖子
useEffect(() => {
fetchUserPosts(userId).then(setPosts);
}, [userId]);
// 設(shè)置頁面標題
useEffect(() => {
if (user) {
document.title = `${user.name}的儀表板`;
}
}, [user]);
// ...
}
2. 避免無限循環(huán)
確保依賴數(shù)組正確，避免不必要的重新執(zhí)行：
function SearchResults({ query }) {
const [results, setResults] = useState([]);
// ? 可能造成無限循環(huán)
useEffect(() => {
search(query).then(setResults);
}, [results]); // results變化會再次觸發(fā)
// ? 正確的依賴
useEffect(() => {
search(query).then(setResults);
}, [query]); // 只有query變化時才執(zhí)行
}
3. 自定義Hook：代碼復(fù)用的藝術(shù)
自定義Hook是以"use"開頭的函數(shù)，可以在其內(nèi)部調(diào)用其他Hook。它們是提取組件邏輯到可重用函數(shù)的強大方式。
創(chuàng)建第一個自定義Hook
useCounter：計數(shù)器邏輯
import { useState } from 'react';
function useCounter(initialValue = 0, step = 1) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount(prev => prev + step);
const decrement = () => setCount(prev => prev - step);
const reset = () => setCount(initialValue);
return {
count,
increment,
decrement,
reset,
setCount
};
}
// 使用自定義Hook
function Counter() {
const { count, increment, decrement, reset } = useCounter(0, 2);
return (
<div>
<p>計數(shù): {count}</p>
<button onClick={increment}>+2</button>
<button onClick={decrement}>-2</button>
<button onClick={reset}>重置</button>
</div>
);
}
高級自定義Hook示例
useAPI：數(shù)據(jù)獲取Hook
import { useState, useEffect } from 'react';
function useAPI(url, options = {}) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let cancelled = false;
async function fetchData() {
setLoading(true);
setError(null);
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (!cancelled) {
setData(result);
}
} catch (err) {
if (!cancelled) {
setError(err.message);
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
}
fetchData();
// 清理函數(shù)：取消請求
return () => {
cancelled = true;
};
}, [url, JSON.stringify(options)]);
const refetch = () => {
setLoading(true);
setError(null);
// 觸發(fā)重新獲取
};
return { data, loading, error, refetch };
}
// 使用示例
function UserList() {
const { data: users, loading, error } = useAPI('/api/users');
if (loading) return <div>加載中...</div>;
if (error) return <div>錯誤: {error}</div>;
return (
<ul>
{users?.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
useLocalStorage：本地存儲Hook
import { useState, useEffect } from 'react';
function useLocalStorage(key, initialValue) {
// 獲取初始值
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch (error) {
console.error(`獲取localStorage中的${key}失敗:`, error);
return initialValue;
}
});
// 更新localStorage的函數(shù)
const setValue = value => {
try {
// 允許value是函數(shù)，用于函數(shù)式更新
const valueToStore = value instanceof Function ? value(storedValue) : value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error(`設(shè)置localStorage中的${key}失敗:`, error);
}
};
return [storedValue, setValue];
}
// 使用示例
function Settings() {
const [theme, setTheme] = useLocalStorage('theme', 'light');
const [language, setLanguage] = useLocalStorage('language', 'zh');
return (
<div>
<select value={theme} onChange={e => setTheme(e.target.value)}>
<option value="light">淺色</option>
<option value="dark">深色</option>
</select>
<select value={language} onChange={e => setLanguage(e.target.value)}>
<option value="zh">中文</option>
<option value="en">English</option>
</select>
</div>
);
}
自定義Hook的設(shè)計原則
1. 單一職責(zé)原則
每個自定義Hook應(yīng)該只做一件事，并且做好：
// ? 好：專注于表單驗證
function useFormValidation(initialValues, validationRules) {
// 驗證邏輯
}
// ? 好：專注于API調(diào)用
function useAPI(url) {
// API調(diào)用邏輯
}
// ? 不好：職責(zé)混亂
function useFormAPIValidation(url, initialValues, rules) {
// 既處理API又處理驗證
}
2. 清晰的接口設(shè)計
返回值應(yīng)該直觀易懂：
// ? 好：清晰的返回值
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = () => setValue(prev => !prev);
const setTrue = () => setValue(true);
const setFalse = () => setValue(false);
return { value, toggle, setTrue, setFalse };
}
// ? 也可以返回數(shù)組（類似useState）
function useToggle(initialValue = false) {
const [value, setValue] = useState(initialValue);
const toggle = () => setValue(prev => !prev);
return [value, toggle];
}
3. 處理邊界情況
考慮各種邊界情況和錯誤處理：
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
// 處理delay為0或負數(shù)的情況
if (delay <= 0) {
setDebouncedValue(value);
return;
}
const timer = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(timer);
};
}, [value, delay]);
return debouncedValue;
}
4. Hook使用的常見陷阱與解決方案
陷阱1：閉包陷阱
// ? 問題代碼
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1); // 總是使用初始值0
}, 1000);
return () => clearInterval(timer);
}, []); // 空依賴數(shù)組
return <div>{count}</div>;
}
// ? 解決方案1：使用函數(shù)式更新
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(timer);
}, []);
return <div>{count}</div>;
}
// ? 解決方案2：包含依賴
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(count + 1);
}, 1000);
return () => clearInterval(timer);
}, [count]); // 包含count依賴
return <div>{count}</div>;
}
陷阱2：依賴數(shù)組遺漏
// ? 問題代碼
function UserProfile({ userId, theme }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId, theme).then(setUser);
}, [userId]); // 遺漏了theme依賴
return <div>{user?.name}</div>;
}
// ? 解決方案
function UserProfile({ userId, theme }) {
const [user, setUser] = useState(null);
useEffect(() => {
fetchUser(userId, theme).then(setUser);
}, [userId, theme]); // 包含所有依賴
return <div>{user?.name}</div>;
}
5. 性能優(yōu)化技巧
使用React.memo減少不必要的渲染
import React, { memo } from 'react';
const ExpensiveComponent = memo(function ExpensiveComponent({ data, onUpdate }) {
// 只有當(dāng)data或onUpdate發(fā)生變化時才重新渲染
return (
<div>
{/* 復(fù)雜的渲染邏輯 */}
</div>
);
});
使用useCallback和useMemo
import React, { useState, useCallback, useMemo } from 'react';
function OptimizedComponent({ items }) {
const [query, setQuery] = useState('');
// 緩存過濾后的結(jié)果
const filteredItems = useMemo(() => {
return items.filter(item =>
item.name.toLowerCase().includes(query.toLowerCase())
);
}, [items, query]);
// 緩存事件處理函數(shù)
const handleSearch = useCallback((e) => {
setQuery(e.target.value);
}, []);
return (
<div>
<input value={query} onChange={handleSearch} />
<ItemList items={filteredItems} />
</div>
);
}
React Hooks為我們提供了強大而靈活的方式來管理組件狀態(tài)和副作用。通過合理使用useState、useEffect和自定義Hook，我們可以編寫出更加簡潔、可維護和可復(fù)用的React代碼。
記住這些最佳實踐：
- useState使用函數(shù)式更新避免閉包陷阱
- useEffect正確設(shè)置依賴數(shù)組，及時清理副作用
- 自定義Hook遵循單一職責(zé)原則，提供清晰的接口
- 注意性能優(yōu)化，避免不必要的重新渲染
隨著對Hooks理解的深入，你會發(fā)現(xiàn)它們不僅改變了我們編寫React的方式，更重要的是改變了我們思考組件邏輯的方式。
到此這篇關(guān)于React Hooks之useState,useEffect及自定義Hook的最佳實踐的文章就介紹到這了,更多相關(guān)React Hooks介紹內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
React Hooks與setInterval的踩坑問題小結(jié)
本文主要介紹了React Hooks與setInterval的踩坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了基于webpack4.X從零搭建React腳手架的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文給大家分享React鼠標多選功能，通過導(dǎo)入組件直接包裹已經(jīng)設(shè)計好的列表即可，操作簡單方便,對React鼠標多選相關(guān)知識感興趣的朋友一起看看吧2021-05-05
淺談React Native Flexbox布局(小結(jié))
這篇文章主要介紹了淺談React Native Flexbox布局(小結(jié)),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要給大家介紹了React三種避免子組件無效刷新的解決方案,使用React.memo,使用React.useMemo或React.useCallback,將子組件作為children來傳遞這三種方案,文章通過代碼介紹的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了React?Context用法小結(jié)(附完整代碼),Context提供了一種新的組件之間共享數(shù)據(jù)的方式，允許數(shù)據(jù)隔代傳遞，而不必顯式的通過組件樹逐層傳遞props，本文通過示例代碼介紹的非常詳細，需要的朋友可以參考下2023-04-04
React render核心階段深入探究穿插scheduler與reconciler
這篇文章主要介紹了React render核心階段穿插scheduler與reconciler，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
這篇文章主要介紹了React Class組件生命周期,包括react組件的兩種定義方式和class組件不同階段生命周期函數(shù)執(zhí)行順序，本文給大家介紹的非常詳細，需要的朋友可以參考下2021-08-08
這篇文章主要為大家介紹了React路由攔截模式及withRouter示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08