React Hooks 深度解析
latte-girl·
ReactHooks原理
Hooks 的设计哲学
Hooks 让函数组件拥有了状态管理和副作用处理的能力。
核心 Hooks
useState
const [count, setCount] = useState(0)
// 函数式更新（推荐）
setCount(prev => prev + 1)useEffect
useEffect(() => {
// 副作用逻辑
const subscription = subscribe()
return () => {
// 清理函数
subscription.unsubscribe()
}
}, [dependency])useCallback 和 useMemo
// 缓存函数
const handleClick = useCallback(() => {
doSomething(a, b)
}, [a, b])
// 缓存计算结果
const expensiveValue = useMemo(() => {
return computeExpensiveValue(data)
}, [data])常见陷阱
- 忘记依赖项 - 使用 ESLint 插件
- 过度优化 - 不要到处用 useMemo
- 闭包陷阱 - 注意 stale closure
掌握 Hooks，写出更优雅的 React 代码！
