快捷導(dǎo)航

React Hooks 鉤子的具體使用

更新時(shí)間：2025年09月15日 09:54:10 作者：weixin_42339193

React Hooks是React 16.8引入的重要特性,讓函數(shù)組件能夠擁有類組件的狀態(tài)和生命周期能力,下面就來介紹一下React Hooks的具體使用,m感興趣的可以了解一下

一、基礎(chǔ) Hooks（最常用）

useState

功能：為函數(shù)組件添加狀態(tài)管理。

const [count, setCount] = useState(0); // 初始值為0
// 更新狀態(tài)（直接賦值或函數(shù)式更新）
setCount(prev => prev + 1);

場(chǎng)景：管理組件內(nèi)部的簡(jiǎn)單狀態(tài)（如表單輸入、開關(guān)狀態(tài)等）。

useEffect

功能：處理組件的副作用（如數(shù)據(jù)請(qǐng)求、訂閱、DOM 操作），替代類組件的生命周期。
用法：

// 組件掛載和更新時(shí)執(zhí)行（依賴項(xiàng)變化才觸發(fā)）
useEffect(() => {
  const timer = setInterval(() => setCount(c => c + 1), 1000);
  // 清理函數(shù)（組件卸載或依賴變化前執(zhí)行）
  return () => clearInterval(timer); 
}, []); // 空依賴：只在掛載和卸載時(shí)執(zhí)行

場(chǎng)景：數(shù)據(jù)加載、事件監(jiān)聽、定時(shí)器等需要 “副作用” 的操作。

useContext

功能：跨組件共享數(shù)據(jù)，避免 “props drilling”（層層傳遞 props）。
用法

// 先創(chuàng)建 Context
const ThemeContext = createContext('light');
// 在組件中獲取 Context 值
const theme = useContext(ThemeContext);

場(chǎng)景：全局狀態(tài)（如主題、用戶信息）在多層組件中的共享

二、額外的 Hooks（處理復(fù)雜場(chǎng)景）

1、useReducer

功能：通過 reducer 管理復(fù)雜狀態(tài)邏輯，類似 Redux 的簡(jiǎn)化版

// 定義 reducer 函數(shù)（狀態(tài)更新規(guī)則）
function todoReducer(state, action) {
  switch(action.type) {
    case 'ADD': return [...state, action.payload];
    default: return state;
  }
}
// 在組件中使用
const [todos, dispatch] = useReducer(todoReducer, []);
// 觸發(fā)更新
dispatch({ type: 'ADD', payload: '學(xué)習(xí) Hooks' });

場(chǎng)景：狀態(tài)邏輯復(fù)雜（多值關(guān)聯(lián)、多操作類型）或需要通過子組件修改父組件狀態(tài)。

2、useCallback

功能：緩存函數(shù)，避免因函數(shù)重新創(chuàng)建導(dǎo)致子組件不必要的重渲染

// 緩存 handleClick 函數(shù)，依賴項(xiàng)不變則函數(shù)引用不變
const handleClick = useCallback(() => {
  console.log('點(diǎn)擊了', count);
}, [count]); // 依賴 count，count 變則函數(shù)重新創(chuàng)建

3、useMemo

功能：緩存計(jì)算結(jié)果，避免每次渲染重復(fù)執(zhí)行耗時(shí)計(jì)算。

// 緩存計(jì)算結(jié)果，依賴項(xiàng)不變則直接返回緩存值
const total = useMemo(() => {
  return list.reduce((sum, item) => sum + item.price, 0);
}, [list]); // 依賴 list，list 變則重新計(jì)算

場(chǎng)景：復(fù)雜計(jì)算（如大數(shù)據(jù)列表過濾、排序）。

4、useRef

功能：創(chuàng)建一個(gè)可變的 ref 對(duì)象，可用于訪問 DOM 元素或存儲(chǔ)跨渲染周期的數(shù)據(jù)。

// 訪問 DOM 元素
const inputRef = useRef(null);
useEffect(() => inputRef.current.focus(), []);

// 存儲(chǔ)跨渲染的數(shù)據(jù)（修改不會(huì)觸發(fā)重渲染）
const timerRef = useRef(null);
timerRef.current = setInterval(...);

5、useImperativeHandle

功能：自定義通過 ref 暴露給父組件的實(shí)例值，限制子組件暴露的接口。

function ChildComponent(props, ref) {
  const inputRef = useRef(null);
  // 只暴露 focus 方法給父組件
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));
  return <input ref={inputRef} />;
}
// 父組件通過 ref 調(diào)用子組件暴露的方法
const childRef = useRef(null);
childRef.current.focus();

場(chǎng)景：父組件需要操作子組件 DOM，但希望限制訪問范圍（避免過度耦合）。

6、useLayoutEffect

功能：與 useEffect 類似，但回調(diào)函數(shù)在 DOM 更新后同步執(zhí)行（而 useEffect 是異步）。

useLayoutEffect(() => {
  // 讀取 DOM 布局并立即修改（避免頁面閃爍）
  const { height } = elementRef.current.getBoundingClientRect();
  elementRef.current.style.marginTop = `${100 - height}px`;
}, []);

場(chǎng)景：需要在 DOM 更新后立即讀取布局信息并修改（如避免因樣式計(jì)算導(dǎo)致的閃爍）。

7、useDebugValue

功能：在 React DevTools 中為自定義 Hook 顯示標(biāo)簽，方便調(diào)試。

function useFriendStatus(friendId) {
  const [isOnline, setIsOnline] = useState(null);
  // 在 DevTools 中顯示 "FriendStatus: 在線/離線"
  useDebugValue(isOnline ? '在線' : '離線');
  return isOnline;
}

場(chǎng)景：開發(fā)自定義 Hook 時(shí)，提升調(diào)試體驗(yàn)。

三、React 18+ 新增 Hooks（并發(fā)特性相關(guān)）

useTransition

功能：標(biāo)記非緊急更新，避免阻塞用戶交互（如輸入、點(diǎn)擊）。

const [isPending, startTransition] = useTransition();
// 緊急更新：立即響應(yīng)輸入
setInput(e.target.value);
// 非緊急更新：標(biāo)記為過渡任務(wù)
startTransition(() => {
  setFilteredList(filterData(e.target.value)); // 耗時(shí)操作
});

場(chǎng)景：輸入搜索、列表篩選等需要 “優(yōu)先響應(yīng)輸入，延遲處理結(jié)果” 的場(chǎng)景。

2、useDeferredValue

功能：為狀態(tài)創(chuàng)建一個(gè) “延遲版本”，優(yōu)先保證 UI 響應(yīng)速度

const [input, setInput] = useState('');
// 延遲版本：input 更新后，deferredInput 會(huì)“滯后”更新
const deferredInput = useDeferredValue(input);
// 基于延遲值渲染（避免輸入時(shí)卡頓）
return <List data={filter(deferredInput)} />;

場(chǎng)景：與 useTransition 類似，簡(jiǎn)化非緊急狀態(tài)的處理。

3、useId

功能：生成跨服務(wù)器和客戶端的唯一 ID，用于表單關(guān)聯(lián)、無障礙訪問（ARIA）

const id = useId(); // 生成如 "r1:2" 的唯一ID
return (
  <div>
    <label htmlFor={`${id}-name`}>姓名</label>
    <input id={`${id}-name`} />
  </div>
);

場(chǎng)景：避免 SSR（服務(wù)器渲染）時(shí)客戶端與服務(wù)器 ID 不匹配的問題。

4、useSyncExternalStore

功能：同步外部狀態(tài)（如 Redux、localStorage），確保在并發(fā)渲染中狀態(tài)一致性。

// 從外部 store 讀取狀態(tài)
const state = useSyncExternalStore(
  store.subscribe, // 訂閱狀態(tài)變化
  store.getState,  // 獲取當(dāng)前狀態(tài)
  store.getServerState // 服務(wù)器初始狀態(tài)（SSR用）
);