React 目前强烈推荐使用函数组件（Functional Components）结合 Hooks来开发。它更简洁、灵活、可复用性更强，是现代 React 开发的主流方式。
本文重点介绍函数组件中最常用的 Hooks，帮助你快速掌握状态管理、副作用处理等核心能力。
一、常用 Hooks 详解
1. useState：管理组件状态
最基础的状态管理 Hook，用于在函数组件中添加局部状态。
import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // 初始值 0 return ( <div> <p>当前计数：{count}</p> <button onClick={() => setCount(count + 1)}>加 1</button> <button onClick={() => setCount(prev => prev + 1)}>函数式更新</button> </div> ); }setCount支持直接传新值或函数式更新（推荐后者，避免闭包问题）- 状态更新是异步的，会合并多次更新
2. useEffect：处理副作用
用于处理数据获取、订阅、定时器等副作用操作。
import React, { useState, useEffect } from 'react'; function Timer() { const [seconds, setSeconds] = useState(0); useEffect(() => { const timer = setInterval(() => { setSeconds(prev => prev + 1); }, 1000); // 清理函数：组件卸载时执行 return () => clearInterval(timer); }, []); // 空依赖数组：只在挂载时执行一次 return <div>已运行 {seconds} 秒</div>; }依赖数组规则：
- 无依赖数组：每次渲染后都执行
[]：仅在组件挂载和卸载时执行一次[dep1, dep2]：指定依赖变化时执行
3. useContext：消费 Context
避免 props 层层传递全局数据（如主题、用户信息）。
import React, { useContext } from 'react'; const ThemeContext = React.createContext('light'); function Button() { const theme = useContext(ThemeContext); return <button style={{ background: theme === 'dark' ? '#333' : '#fff' }}> 当前主题：{theme} </button>; }4. useReducer：复杂状态逻辑管理
适合状态更新逻辑复杂、涉及多个子值或依赖前一个状态时。
import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; case 'reset': return initialState; default: return state; } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return ( <> Count: {state.count} <button onClick={() => dispatch({ type: 'increment' })}>加</button> <button onClick={() => dispatch({ type: 'decrement' })}>减</button> <button onClick={() => dispatch({ type: 'reset' })}>重置</button> </> ); }5. useRef：获取 DOM 或保存可变值
- 获取 DOM 元素
- 保存不触发渲染的可变值
import React, { useRef, useEffect } from 'react'; function TextInput() { const inputRef = useRef(null); const focusInput = () => { inputRef.current?.focus(); }; useEffect(() => { focusInput(); // 自动聚焦 }, []); return ( <> <input ref={inputRef} type="text" /> <button onClick={focusInput}>手动聚焦</button> </> ); }6. useMemo：缓存计算结果
避免昂贵计算在每次渲染时重复执行。
const expensiveValue = useMemo(() => { return computeExpensiveValue(a, b); }, [a, b]); // 只有 a 或 b 变化时重新计算7. useCallback：缓存函数
防止子组件因函数引用变化而重复渲染。
const handleClick = useCallback(() => { // 处理逻辑 }, [dependency]);二、其他实用 Hooks
- useLayoutEffect：在 DOM 更新后同步执行，适合测量布局
- useImperativeHandle：配合 forwardRef 自定义暴露给父组件的实例值
- useDeferredValue：延迟更新非紧急状态（React 18+）
- useTransition：标记过渡更新，保持 UI 响应性（React 18+）
总结
掌握以下核心 Hooks 即可应对 90% 的开发场景：
useState+useEffect：基础状态与副作用useContext：全局数据共享useReducer：复杂状态逻辑useRef：DOM 操作与持久值useMemo/useCallback：性能优化
函数组件 + Hooks 是 React 的未来，代码更清晰、逻辑更集中，强烈推荐在新项目中全面使用！
有任何 Hooks 使用疑问，欢迎留言交流～
