React 生命周期與 Hook 理解解析

從生命周期到 Hook：React 組件演進之路

React 組件的本質是管理渲染與副作用的統一體。Class 組件通過生命周期方法實現這一目標，而函數組件則依靠 Hook 系統達成相同效果。

Class 組件生命周期詳解

生命周期完整流程

Class 組件生命周期可分為三大階段：掛載、更新和卸載。

class Clock extends React.Component {constructor(props) {super(props);this.state = { date: new Date() };console.log('constructor: 組件初始化');}componentDidMount() {console.log('componentDidMount: 組件已掛載');this.timerID = setInterval(() => this.tick(), 1000);}componentDidUpdate(prevProps, prevState) {console.log('componentDidUpdate: 組件已更新');if (prevState.date.getSeconds() !== this.state.date.getSeconds()) {document.title = `當前時間: ${this.state.date.toLocaleTimeString()}`;}}componentWillUnmount() {console.log('componentWillUnmount: 組件即將卸載');clearInterval(this.timerID);}tick() {this.setState({ date: new Date() });}render() {return <div>當前時間: {this.state.date.toLocaleTimeString()}</div>;}
}

掛載階段執行順序

constructor(): 初始化狀態與綁定方法
static getDerivedStateFromProps(): 根據 props 更新 state (React 16.3+)
render(): 計算并返回 JSX
DOM 更新
componentDidMount(): DOM 掛載完成后執行，適合進行網絡請求、訂閱和DOM操作

更新階段執行順序

static getDerivedStateFromProps(): 同掛載階段
shouldComponentUpdate(): 決定是否繼續更新流程
render(): 重新計算 JSX
getSnapshotBeforeUpdate(): 在DOM更新前捕獲信息
DOM 更新
componentDidUpdate(): DOM更新完成后執行

卸載階段

componentWillUnmount(): 清理訂閱、定時器、取消網絡請求等

Class 組件常見陷阱

class UserProfile extends React.Component {state = { userData: null };componentDidMount() {this.fetchUserData();}componentDidUpdate(prevProps) {// 常見錯誤：沒有條件判斷導致無限循環if (prevProps.userId !== this.props.userId) {this.fetchUserData();}}fetchUserData() {fetch(`/api/users/${this.props.userId}`).then(response => response.json()).then(data => this.setState({ userData: data }));}render() {// ...}
}

未在條件更新中比較props變化：導致無限循環
this綁定問題：事件處理函數中this指向丟失
生命周期中的副作用管理混亂：副作用散布在多個生命周期方法中
忘記清理副作用：componentWillUnmount中未清理導致內存泄漏

函數組件與Hook系統剖析

Hook 徹底改變了React組件的編寫方式，將分散在生命周期方法中的邏輯按照關注點聚合。

常用Hook與生命周期對應關系

function Clock() {const [date, setDate] = useState(new Date());useEffect(() => {console.log('組件掛載或更新');// 相當于 componentDidMount 和 componentDidUpdateconst timerID = setInterval(() => {setDate(new Date());}, 1000);// 相當于 componentWillUnmountreturn () => {console.log('清理副作用或組件卸載');clearInterval(timerID);};}, []); // 空依賴數組等同于僅在掛載時執行useEffect(() => {document.title = `當前時間: ${date.toLocaleTimeString()}`;}, [date]); // 僅在date變化時執行return <div>當前時間: {date.toLocaleTimeString()}</div>;
}

Class生命周期	Hook對應方式
constructor	useState 初始化
componentDidMount	useEffect(() => {}, [])
componentDidUpdate	useEffect(() => {}, [依賴項])
componentWillUnmount	useEffect(() => { return () => {} }, [])
shouldComponentUpdate	React.memo + 自定義比較

useEffect 深度解析

useEffect 是React函數組件中管理副作用的核心機制，其工作原理與調度機制決定了React應用的性能與正確性。

useEffect 執行模型

function SearchResults({ query }) {const [results, setResults] = useState([]);const [isLoading, setIsLoading] = useState(false);useEffect(() => {// 1. 執行副作用前的準備工作setIsLoading(true);// 2. 異步副作用const controller = new AbortController();const signal = controller.signal;fetchResults(query, signal).then(data => {setResults(data);setIsLoading(false);}).catch(error => {if (error.name !== 'AbortError') {setIsLoading(false);console.error('搜索失敗:', error);}});// 3. 清理函數 - 在下一次effect執行前或組件卸載時調用return () => {controller.abort();};}, [query]); // 依賴數組：僅當query變化時重新執行return (<div>{isLoading ? (<div>加載中...</div>) : (<ul>{results.map(item => (<li key={item.id}>{item.title}</li>))}</ul>)}</div>);
}

useEffect 內部執行機制

組件渲染后：React 記住需要執行的 effect 函數
瀏覽器繪制完成：React 異步執行 effect (與componentDidMount/Update不同，不會阻塞渲染)
依賴項檢查：僅當依賴數組中的值變化時才重新執行
清理上一次effect：在執行新effect前先執行上一次effect返回的清理函數

常見的 useEffect 陷阱與解決方案

function ProfilePage({ userId }) {const [user, setUser] = useState(null);// 陷阱1: 依賴項缺失useEffect(() => {fetchUser(userId).then(data => setUser(data));// 應該添加 userId 到依賴數組}, []); // 錯誤：缺少 userId 依賴// 陷阱2: 過于頻繁執行useEffect(() => {const handleResize = () => {console.log('窗口大小改變', window.innerWidth);};window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}); // 錯誤：缺少依賴數組，每次渲染都重新添加監聽
}

解決方案：

function ProfilePage({ userId }) {const [user, setUser] = useState(null);// 解決方案1: 完整依賴項useEffect(() => {let isMounted = true;fetchUser(userId).then(data => {if (isMounted) setUser(data);});return () => { isMounted = false };}, [userId]); // 正確：添加 userId 到依賴數組// 解決方案2: 使用useCallback防止頻繁創建函數const handleResize = useCallback(() => {console.log('窗口大小改變', window.innerWidth);}, []);useEffect(() => {window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, [handleResize]); // 正確：添加handleResize到依賴數組
}

React Hook 規則與原理解析

Hook 工作原理：基于順序的依賴系統

// React內部簡化實現示意
let componentHooks = [];
let currentHookIndex = 0;// 模擬useState的實現
function useState(initialState) {const hookIndex = currentHookIndex;const hooks = componentHooks;// 首次渲染時初始化stateif (hooks[hookIndex] === undefined) {hooks[hookIndex] = initialState;}// 設置狀態的函數const setState = newState => {if (typeof newState === 'function') {hooks[hookIndex] = newState(hooks[hookIndex]);} else {hooks[hookIndex] = newState;}// 觸發重新渲染rerenderComponent(); };currentHookIndex++;return [hooks[hookIndex], setState];
}// 模擬函數組件執行
function RenderComponent(Component) {currentHookIndex = 0;const output = Component();return output;
}

Hook依賴固定的調用順序，這就是為什么：

不能在條件語句中使用Hook：會打亂Hook的調用順序
不能在循環中使用Hook：每次渲染時Hook數量必須一致
只能在React函數組件或自定義Hook中調用Hook：確保React能正確跟蹤狀態

自定義Hook：邏輯復用的最佳實踐

// 自定義Hook: 封裝數據獲取邏輯
function useDataFetching(url) {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {let isMounted = true;setLoading(true);const controller = new AbortController();fetch(url, { signal: controller.signal }).then(response => {if (!response.ok) throw new Error('網絡請求失敗');return response.json();}).then(data => {if (isMounted) {setData(data);setLoading(false);}}).catch(error => {if (isMounted && error.name !== 'AbortError') {setError(error);setLoading(false);}});return () => {isMounted = false;controller.abort();};}, [url]);return { data, loading, error };
}// 使用自定義Hook
function UserProfile({ userId }) {const { data: user, loading, error } = useDataFetching(`/api/users/${userId}`);if (loading) return <div>加載中...</div>;if (error) return <div>出錯了: {error.message}</div>;return (<div><h1>{user.name}</h1><p>Email: {user.email}</p></div>);
}

自定義Hook優勢：

關注點分離：將邏輯與UI完全解耦
代碼復用：在多個組件間共享邏輯而不是組件本身
測試友好：邏輯集中，易于單元測試
清晰的依賴管理：顯式聲明數據流向

高級性能優化技巧

依賴數組優化

function SearchComponent({ defaultQuery }) {// 1. 基本狀態const [query, setQuery] = useState(defaultQuery);// 2. 衍生狀態/計算 - 優化前const [debouncedQuery, setDebouncedQuery] = useState(query);useEffect(() => {const handler = setTimeout(() => {setDebouncedQuery(query);}, 500);return () => clearTimeout(handler);}, [query]); // 每次query變化都會創建新定時器// 3. 網絡請求 - 優化前useEffect(() => {// 這個函數每次渲染都會重新創建const fetchResults = async () => {const response = await fetch(`/api/search?q=${debouncedQuery}`);const data = await response.json();// 處理結果...};fetchResults();}, [debouncedQuery]); // 問題：fetchResults每次都是新函數引用
}

優化后：

function SearchComponent({ defaultQuery }) {// 1. 基本狀態const [query, setQuery] = useState(defaultQuery);// 2. 使用useMemo緩存計算結果const debouncedQuery = useDebouncedValue(query, 500);// 3. 使用useCallback緩存函數引用const fetchResults = useCallback(async (searchQuery) => {const response = await fetch(`/api/search?q=${searchQuery}`);return response.json();}, []); // 空依賴數組，函數引用穩定// 4. 使用穩定函數引用useEffect(() => {let isMounted = true;const getResults = async () => {try {const data = await fetchResults(debouncedQuery);if (isMounted) {// 處理結果...}} catch (error) {if (isMounted) {// 處理錯誤...}}};getResults();return () => { isMounted = false };}, [debouncedQuery, fetchResults]); // fetchResults現在是穩定引用
}// 自定義Hook: 處理防抖
function useDebouncedValue(value, delay) {const [debouncedValue, setDebouncedValue] = useState(value);useEffect(() => {const handler = setTimeout(() => {setDebouncedValue(value);}, delay);return () => clearTimeout(handler);}, [value, delay]);return debouncedValue;
}

React.memo、useMemo 與 useCallback

// 阻止不必要的重渲染
const ExpensiveComponent = React.memo(function ExpensiveComponent({ data, onItemClick }) {console.log('ExpensiveComponent渲染');return (<div>{data.map(item => (<div key={item.id} onClick={() => onItemClick(item.id)}>{item.name}</div>))}</div>);
});function ParentComponent() {const [count, setCount] = useState(0);const [items, setItems] = useState([{ id: 1, name: '項目1' },{ id: 2, name: '項目2' }]);// 問題：每次渲染都創建新函數引用，導致ExpensiveComponent重渲染const handleItemClick = (id) => {console.log('點擊項目:', id);};return (<div><button onClick={() => setCount(count + 1)}>計數: {count}</button>{/* 即使count變化，items沒變，ExpensiveComponent也會重渲染 */}<ExpensiveComponent data={items} onItemClick={handleItemClick} /></div>);
}

優化后：

function ParentComponent() {const [count, setCount] = useState(0);const [items, setItems] = useState([{ id: 1, name: '項目1' },{ id: 2, name: '項目2' }]);// 使用useCallback固定函數引用const handleItemClick = useCallback((id) => {console.log('點擊項目:', id);}, []); // 空依賴數組表示函數引用永不變化// 使用useMemo緩存復雜計算結果const processedItems = useMemo(() => {console.log('處理items數據');return items.map(item => ({...item,processed: true}));}, [items]); // 僅當items變化時重新計算return (<div><button onClick={() => setCount(count + 1)}>計數: {count}</button>{/* 現在count變化不會導致ExpensiveComponent重渲染 */}<ExpensiveComponent data={processedItems} onItemClick={handleItemClick} /></div>);
}

從生命周期到Hook的遷移策略

漸進式遷移Class組件

// 步驟1: 從Class組件提取邏輯到獨立函數
class UserManager extends React.Component {state = {user: null,loading: true,error: null};componentDidMount() {this.fetchUser();}componentDidUpdate(prevProps) {if (prevProps.userId !== this.props.userId) {this.fetchUser();}}fetchUser() {this.setState({ loading: true });fetchUserAPI(this.props.userId).then(data => this.setState({ user: data, loading: false })).catch(error => this.setState({ error, loading: false }));}render() {// 渲染邏輯...}
}// 步驟2: 創建等效的自定義Hook
function useUser(userId) {const [state, setState] = useState({user: null,loading: true,error: null});useEffect(() => {let isMounted = true;setState(s => ({ ...s, loading: true }));fetchUserAPI(userId).then(data => {if (isMounted) {setState({ user: data, loading: false, error: null });}}).catch(error => {if (isMounted) {setState({ user: null, loading: false, error });}});return () => { isMounted = false };}, [userId]);return state;
}// 步驟3: 創建函數組件版本
function UserManager({ userId }) {const { user, loading, error } = useUser(userId);// 渲染邏輯...
}

優雅處理復雜狀態

// Class組件中復雜狀態管理
class FormManager extends React.Component {state = {values: { name: '', email: '', address: '' },errors: {},touched: {},isSubmitting: false,submitError: null,submitSuccess: false};// 大量狀態更新邏輯...
}// 使用useReducer優化復雜狀態管理
function FormManager() {const initialState = {values: { name: '', email: '', address: '' },errors: {},touched: {},isSubmitting: false,submitError: null,submitSuccess: false};const [state, dispatch] = useReducer((state, action) => {switch (action.type) {case 'FIELD_CHANGE':return {...state,values: { ...state.values, [action.field]: action.value },touched: { ...state.touched, [action.field]: true }};case 'VALIDATE':return { ...state, errors: action.errors };case 'SUBMIT_START':return { ...state, isSubmitting: true, submitError: null };case 'SUBMIT_SUCCESS':return { ...state, isSubmitting: false, submitSuccess: true };case 'SUBMIT_ERROR':return { ...state, isSubmitting: false, submitError: action.error };case 'RESET':return initialState;default:return state;}}, initialState);// 使用dispatch來更新狀態const handleFieldChange = (field, value) => {dispatch({ type: 'FIELD_CHANGE', field, value });};// 表單提交邏輯const handleSubmit = async (e) => {e.preventDefault();dispatch({ type: 'SUBMIT_START' });try {await submitForm(state.values);dispatch({ type: 'SUBMIT_SUCCESS' });} catch (error) {dispatch({ type: 'SUBMIT_ERROR', error });}};// 渲染表單...
}

未來：React 18+ 與 Concurrent 模式

隨著 React 18 的發布，并發渲染模式將改變副作用的執行模型。Hook 系統設計與并發渲染天然契合，為未來的 React 應用提供更優雅的狀態與副作用管理。

// React 18 中的新Hook: useTransition
function SearchResults() {const [query, setQuery] = useState('');const [isPending, startTransition] = useTransition();const handleChange = (e) => {// 立即更新輸入框setQuery(e.target.value);// 標記低優先級更新，可被中斷startTransition(() => {// 復雜搜索邏輯，在空閑時執行performSearch(e.target.value);});};return (<div><input value={query} onChange={handleChange} />{isPending ? <div>搜索中...</div> : <ResultsList />}</div>);
}