React Hooks 深度解析

React Hooks 彻底改变了我们编写 React 组件的方式。

useState 进阶

函数式更新

当新状态依赖于旧状态时，使用函数式更新：

tsx
const [count, setCount] = useState(0)

// 推荐：函数式更新
setCount(prev => prev + 1)

// 不推荐：直接使用当前值
setCount(count + 1)

惰性初始化

对于复杂的初始值计算：

tsx
const [state, setState] = useState(() => {
  // 只在首次渲染时执行
  return expensiveComputation()
})

useEffect 最佳实践

清理函数

tsx
useEffect(() => {
  const subscription = subscribe()
  
  return () => {
    // 清理订阅
    subscription.unsubscribe()
  }
}, [])

依赖数组

tsx
// 每次渲染都执行
useEffect(() => {})

// 仅在挂载时执行
useEffect(() => {}, [])

// 当依赖变化时执行
useEffect(() => {}, [dep1, dep2])

自定义 Hook

tsx
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
}

总结

深入理解 Hooks 的工作原理，能帮助你写出更高效的 React 代码。