Hooks 是 React 16.8 引入的革命性特性，它讓函數組件擁有了類組件的能力。以下是 React Hooks 的詳細使用指南。
一、基礎 Hooks
1. useState - 狀態管理
import { useState } from 'react';function Counter() {const [count, setCount] = useState(0); // 初始值為0return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button>{/* 使用函數式更新 */}<button onClick={() => setCount(prev => prev + 1)}>Safe Increment</button></div>);
}
特點：
- 可以多次調用聲明多個狀態變量
- 狀態更新會觸發組件重新渲染
- 函數式更新確保獲取最新狀態
2. useEffect - 副作用處理
import { useState, useEffect } from 'react';function Example() {const [data, setData] = useState(null);// 相當于 componentDidMount 和 componentDidUpdateuseEffect(() => {fetch('/api/data').then(res => res.json()).then(setData);}, []); // 空數組表示只在組件掛載時執行// 監聽特定狀態變化useEffect(() => {document.title = `Count: ${count}`;}, [count]); // count變化時執行// 清理函數 (相當于 componentWillUnmount)useEffect(() => {const timer = setInterval(() => {console.log('Timer running');}, 1000);return () => clearInterval(timer);}, []);
}
執行時機：
- 默認在每次渲染后執行
- 可以通過依賴數組控制執行條件
- 清理函數在下一次effect執行前運行
