React Hooks 完全指南：15 个核心 Hook 一网打尽

Mon, 15 Apr 2024 00:00:00 +0800

为什么写这篇：React Hooks 2019-02 在 16.8 正式发布，5 年内彻底改变了 React 的写法。从 useState 到 React 19 的 useActionState，Hooks 已经从"新特性"变成"默认写法"。本文按"开箱即用频次"梳理 15 个核心 Hook，给出核心概念、最佳实践与常见坑。

适用读者：刚学 React Hooks 的同学；想系统梳理 18/19 新 Hook 的中级工程师；从 class 组件迁过来的老 React。

前置知识：理解 JSX、函数组件、props。

Hooks 设计哲学
useState：状态管理基石
useReducer：复杂状态的"action + reducer"模式
useEffect：副作用与清理
useLayoutEffect：DOM 更新同步完成后立即执行
useContext：跨组件共享数据
useRef：DOM 引用与持久化数据
useImperativeHandle：自定义 ref 暴露的接口
useMemo & useCallback：缓存计算结果与函数引用
useDebugValue：自定义 Hook 在 DevTools 中的标签
useId：跨服务端/客户端的唯一 ID
useTransition：标记非紧急任务
React 19 新 Hook 速览
自定义 Hook：组合已有 Hook 复用逻辑
Hooks 三大规则

1. Hooks 设计哲学

Hooks 解决的核心问题：让函数组件拥有 class 组件的能力（state、生命周期、context），同时让代码更简洁、更好复用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// ❌ class 组件：逻辑散在生命周期里
class UserList extends React.Component {
 state = { users: [] }
 componentDidMount() {
 fetch('/api/users').then(r => r.json()).then(users => this.setState({ users }))
 }
 render() {
 return <ul>{this.state.users.map(u => <li>{u.name}</li>)}</ul>
 }
}

// ✅ 函数组件 + Hook：逻辑聚拢、可复用
function UserList() {
 const [users, setUsers] = useState([])
 useEffect(() => {
 fetch('/api/users').then(r => r.json()).then(setUsers)
 }, [])
 return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
}

2. useState：状态管理基石

1

const [count, setCount] = useState(0)

2.1 初始值是函数（昂贵计算）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function HeavyComputationComponent() {
 const expensiveInitialValue = () => {
 let sum = 0
 for (let i = 0; i < 1_000_000_000; i++) sum += i
 return sum % 100
 }
 // 函数只在首次渲染执行一次
 const [value, setValue] = useState(expensiveInitialValue)
 return <div>{value}</div>
}

2.2 函数式更新

1
2
3
4


function handleClickMultipleUpdates() {
 setCount(prev => prev + 1)
 setCount(prev => prev + 1) // 最终 count = 2（不是 1）
}

Why：React 18 的 setState 是批处理 + 异步的。连续调 3 次 setCount(c => c+1) 拿到的是"3 次累加后的 count"。

2.3 对象/数组不可变更新

1
2
3
4
5
6
7


const [user, setUser] = useState({ name: '张三', age: 20 })

// ✅ 正确：展开旧对象 + 改一个属性
setUser(prev => ({ ...prev, age: prev.age + 1 }))

const [items, setItems] = useState(['苹果', '香蕉'])
setItems(prev => [...prev, '橙子'])

直接修改原对象不会触发重渲染——React 用引用比较判断要不要更新。

3. useReducer：复杂状态的"action + reducer"模式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


const initialState = { count: 0, step: 1 }

function reducer(state, action) {
 switch (action.type) {
 case 'increment': return { ...state, count: state.count + state.step }
 case 'decrement': return { ...state, count: state.count - state.step }
 case 'setStep': return { ...state, step: action.payload }
 default: throw new Error('unknown action')
 }
}

function Counter() {
 const [state, dispatch] = useReducer(reducer, initialState)
 return (
 <>
 Count: {state.count}
 <button onClick={() => dispatch({ type: 'increment' })}>+</button>
 <button onClick={() => dispatch({ type: 'setStep', payload: 5 })}>step=5</button>
 </>
 )
}

vs useState：state 之间有联动、依赖前一个 state、有多种"动作"时用 useReducer 更清晰。

4. useEffect：副作用与清理

1
2
3
4
5
6
7
8
9


useEffect(() => {
 // 副作用逻辑
 console.log('组件已渲染或依赖项已更新')

 return () => {
 // 可选：清理函数
 console.log('清理')
 }
}, [dep1, dep2])

4.1 三个常见用法

依赖项	行为
不传	每次渲染后都执行（通常不要）
`[]`	只在挂载/卸载时执行（一次）
`[a, b]`	`a` 或 `b` 变化时执行

4.2 清理函数：避免内存泄漏

1
2
3
4


useEffect(() => {
 const timer = setInterval(() => console.log('tick'), 1000)
 return () => clearInterval(timer) // 卸载时清理
}, [])

常见需要清理的场景：定时器、事件监听、网络请求（AbortController）、WebSocket、订阅。

4.3 AbortController 取消请求

1
2
3
4
5
6
7
8


useEffect(() => {
 const controller = new AbortController()
 fetch('/api/data', { signal: controller.signal })
 .then(r => r.json())
 .then(setData)
 .catch(e => { if (e.name !== 'AbortError') console.error(e) })
 return () => controller.abort()
}, [])

5. useLayoutEffect：DOM 更新同步完成后立即执行

1
2
3
4
5


useLayoutEffect(() => {
 // 同步执行，浏览器还没绘制
 ref.current.style.opacity = '0'
 // 立即读取布局相关数据
}, [data])

vs useEffect：

useEffect 异步，浏览器已绘制完才跑

useLayoutEffect 同步，DOM 更新完、浏览器重绘前立即跑

适用场景：读 DOM 布局（offsetHeight、scrollTop）、强制同步重排避免视觉抖动。

陷阱：服务端渲染（SSR）会发警告。建议优先用 useEffect，只有当出现"渲染闪烁"时才换 useLayoutEffect。

6. useContext：跨组件共享数据

解决 “props 透传"问题——避免一层层 <A><B><C>...</C></B></A> 手动传 props。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// 1. 创建 Context
const ThemeContext = createContext({ theme: 'light', toggle: () => {} })

// 2. Provider 包裹
function App() {
 const [theme, setTheme] = useState('light')
 return (
 <ThemeContext.Provider value={{ theme, toggle: () => setTheme(t => t === 'light' ? 'dark' : 'light') }}>
 <Page />
 </ThemeContext.Provider>
 )
}

// 3. 子组件消费
function Button() {
 const { theme, toggle } = useContext(ThemeContext)
 return <button onClick={toggle}>{theme === 'light' ? '🌞' : '🌙'}</button>
}

坑：Context 的 value 每次渲染都是新对象，会让所有消费者重渲染。优化：用 useMemo 包装 value。

1
2


const value = useMemo(() => ({ theme, toggle }), [theme])
return <ThemeContext.Provider value={value}>...</ThemeContext.Provider>

7. useRef：DOM 引用与持久化数据

7.1 获取 DOM 引用

1
2
3
4
5
6
7
8
9


function TextInput() {
 const inputRef = useRef<HTMLInputElement>(null)

 useEffect(() => {
 inputRef.current?.focus() // 自动聚焦
 }, [])

 return <input ref={inputRef} />
}

7.2 持久化数据（不触发重渲染）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


function Timer() {
 const [count, setCount] = useState(0)
 const intervalRef = useRef<number | null>(null)

 const start = () => {
 intervalRef.current = window.setInterval(() => {
 setCount(c => c + 1)
 }, 1000)
 }

 const stop = () => {
 if (intervalRef.current) clearInterval(intervalRef.current)
 }

 return (
 <>
 <p>{count}s</p>
 <button onClick={start}>开始</button>
 <button onClick={stop}>停止</button>
 </>
 )
}

vs useState：改 ref.current 不触发 重渲染——适合"我需要存个值，但改了不更新 UI”。

8. useImperativeHandle：自定义 ref 暴露的接口

配合 forwardRef 使用，让父组件通过 ref 访问子组件的特定方法（隐藏内部实现）。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


const FancyInput = forwardRef((props, ref) => {
 const inputRef = useRef<HTMLInputElement>(null)

 useImperativeHandle(ref, () => ({
 focus: () => inputRef.current?.focus(),
 clear: () => { if (inputRef.current) inputRef.current.value = '' }
 }))

 return <input ref={inputRef} {...props} />
})

// 父组件
function Parent() {
 const ref = useRef<{ focus: () => void; clear: () => void }>(null)
 return (
 <>
 <FancyInput ref={ref} />
 <button onClick={() => ref.current?.focus()}>聚焦</button>
 <button onClick={() => ref.current?.clear()}>清空</button>
 </>
 )
}

Why：子组件自己决定暴露什么 API，父组件不需要知道内部 DOM 结构。

9. useMemo & useCallback：缓存计算结果与函数引用

9.1 useMemo：缓存"计算结果"

1
2
3


const expensiveValue = useMemo(() => {
 return data.reduce((sum, item) => sum + item.price * item.qty, 0)
}, [data]) // data 变才重算

9.2 useCallback：缓存"函数引用"

1
2
3
4
5
6
7
8


const handleClick = useCallback((id: string) => {
 setItems(items => items.filter(i => i.id !== id))
}, []) // 函数永远不重创建

// 子组件配合 React.memo
const Child = memo(function Child({ onClick, value }) {
 return <button onClick={() => onClick(value)}>click</button>
})

三者联动：useMemo 计算 + useCallback 传函数 + React.memo 阻止子组件重渲染——三件套只在大列表/复杂组件才有用。

常见误区：每个函数都包 useCallback——会拖慢性能（依赖比较也是开销）。只在该函数被传给 memo 化的子组件时才用。

10. useDebugValue：自定义 Hook 在 DevTools 中的标签

1
2
3
4
5
6


function useFriendStatus(friendID) {
 const [isOnline, setIsOnline] = useState(null)
 // ... 副作用逻辑
 useDebugValue(isOnline ? 'Online' : 'Offline')
 return isOnline
}

React DevTools → Components 面板里这个 Hook 会显示 Online / Offline，方便调试。

仅在 DevTools 中显示，生产环境不占成本（React 会自动移除）。

11. useId：跨服务端/客户端的唯一 ID

解决 SSR 的水合（hydration）问题——服务端和客户端的 ID 必须一致，否则 React 警告。

1
2
3
4
5
6
7
8
9


function PasswordField() {
 const id = useId() // :r0:
 return (
 <>
 <label htmlFor={id}>Password</label>
 <input id={id} type="password" />
 </>
 )
}

vs 自增 ID：Math.random() / Date.now() 在 SSR 下会不一致。

12. useTransition：标记非紧急任务

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


function Search({ data }) {
 const [isPending, startTransition] = useTransition()
 const [filter, setFilter] = useState('')

 const handleChange = (e) => {
 // 紧急任务：更新输入框（必须立即响应）
 setFilter(e.target.value)

 // 非紧急任务：过滤大列表（可被打断）
 startTransition(() => {
 setFilteredData(data.filter(d => d.name.includes(e.target.value)))
 })
 }

 return (
 <>
 <input value={filter} onChange={handleChange} />
 {isPending && <Spinner />}
 <List items={filteredData} />
 </>
 )
}

效果：用户输入时，输入框立即响应；过滤计算在后台进行（“transitioning”），避免页面卡顿。

13. React 19 新 Hook 速览

13.1 useActionState（替代 useState 表单提交）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


async function saveAction(prevState, formData) {
 await fetch('/api/save', { method: 'POST', body: formData })
 return { ok: true }
}

function Form() {
 const [state, formAction, isPending] = useActionState(saveAction, { ok: false })
 return (
 <form action={formAction}>
 <input name="title" />
 <button disabled={isPending}>{isPending ? '保存中...' : '保存'}</button>
 {state.ok && <p>已保存</p>}
 </form>
 )
}

省掉手写 useState({ loading, error, data }) 三个状态——React 自动管。

13.2 useFormStatus（读父表单的提交状态）

1
2
3
4


function SubmitButton() {
 const { pending, data, method } = useFormStatus()
 return <button disabled={pending}>{pending ? '...' : '提交'}</button>
}

13.3 useOptimistic（乐观更新）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


function Like({ likes, isLiked }) {
 const [optimistic, setOptimistic] = useOptimistic(isLiked)
 return (
 <button onClick={async () => {
 setOptimistic(true) // UI 立即显示已赞
 await fetch('/api/like', { method: 'POST' })
 // 接口成功后由父组件更新真实状态
 }}>
 {optimistic ? '❤️' : '🤍'} {likes}
 </button>
 )
}

Why：用户点"赞"后接口还没返回时，按钮已经变成红色——体感流畅 5 倍。

14. 自定义 Hook：组合已有 Hook 复用逻辑

自定义 Hook = 一个以 use 开头的函数，内部调用其他 Hook。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// useLocalStorage.ts
function useLocalStorage<T>(key: string, initialValue: T) {
 const [value, setValue] = useState<T>(() => {
 const stored = localStorage.getItem(key)
 return stored ? JSON.parse(stored) : initialValue
 })

 useEffect(() => {
 localStorage.setItem(key, JSON.stringify(value))
 }, [key, value])

 return [value, setValue] as const
}

// 用法
function App() {
 const [theme, setTheme] = useLocalStorage<'light' | 'dark'>('theme', 'light')
 return <button onClick={() => setTheme(t => t === 'light' ? 'dark' : 'light')}>{theme}</button>
}

常见自定义 Hook：useFetch / useDebounce / useThrottle / usePagination / useModal / useWebSocket。

15. Hooks 三大规则

只能在函数组件顶层调用——不能在 if/for/嵌套函数里
只能在 React 函数中调用——函数组件、自定义 Hook；不能在普通 JS 函数里
useEffect 依赖项必须完整——配合 eslint-plugin-react-hooks 自动检查

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// ❌ 错误：条件调用 Hook
function Bad() {
 if (count > 0) {
 const [v, setV] = useState(0) // 报错：Hook 数量不固定
 }
}

// ✅ 正确：永远在顶层调用
function Good() {
 const [v, setV] = useState(0)
 if (count > 0) {
 // 用 v 即可
 }
}

Why：React 用"调用顺序"识别每个 Hook（第一次是 useState、第二次是 useEffect…）。条件调用会破坏顺序，state 会错位。

小结

React Hooks 核心 15 个：

Hook	用途	React 版本
`useState`	状态管理基石	16.8+
`useReducer`	复杂状态	16.8+
`useEffect`	副作用	16.8+
`useLayoutEffect`	DOM 同步副作用	16.8+
`useContext`	跨组件共享	16.8+
`useRef`	DOM 引用 + 持久化数据	16.8+
`useImperativeHandle`	配合 forwardRef 暴露 API	16.8+
`useMemo` / `useCallback`	性能优化	16.8+
`useDebugValue`	DevTools 标签	16.8+
`useId`	SSR 唯一 ID	18+
`useTransition`	标记非紧急任务	18+
`useActionState`	表单状态管理	19+
`useFormStatus`	读表单状态	19+
`useOptimistic`	乐观更新	19+
`useDeferredValue`	延迟更新值	18+

下一步：学完 Hooks 之后，进阶性能优化（React.memo / 虚拟列表 / 代码分割）、状态管理（Redux Toolkit / Zustand / Jotai）、数据请求（React Query / SWR）、渲染模式（Suspense / Streaming SSR / Server Components）。

Hooks on Liangweidong's blog