React Hooks 有哪些常用的？各自的作用是什么？
常用 Hooks
1. useState — 状态管理
const [count, setCount] = useState(0)
// 函数式更新（推荐）
setCount(prev => prev + 1)2. useEffect — 副作用
// 挂载时执行
useEffect(() => { fetchData() }, [])
// 依赖变化时执行
useEffect(() => { subscribe(id) }, [id])
// 清理副作用
useEffect(() => {
const timer = setInterval(tick, 1000)
return () => clearInterval(timer) // 卸载时执行
}, [])3. useRef — 引用（不触发重渲染）
const inputRef = useRef(null)
inputRef.current.focus()4. useMemo — 缓存计算结果
const sorted = useMemo(() => expensiveSort(data), [data])5. useCallback — 缓存函数引用
const handleClick = useCallback(() => doSomething(id), [id])6. useContext — 跨组件共享状态
const theme = useContext(ThemeContext)7. useReducer — 复杂状态管理
const [state, dispatch] = useReducer(reducer, initialState)其他 Hooks
| Hook | 作用 |
|---|---|
useLayoutEffect |
同步执行副作用（DOM 更新后，浏览器绘制前） |
useImperativeHandle |
自定义 ref 暴露给父组件的实例值 |
useId |
生成唯一 ID |
useDeferredValue |
延迟更新（React 18） |
useTransition |
标记非紧急更新（React 18） |
Hooks 规则
- 只在顶层调用，不能在循环/条件/嵌套函数中调用
- 只在 React 函数组件或自定义 Hook 中调用
为什么有这些规则
Hooks 依赖调用顺序的索引来对应内部状态。如果在条件语句中调用，顺序可能变化，导致状态错乱。