↓
  1. 文章/

React Hooks 深入理解与最佳实践

·
编程入门 React Hooks 前端

React Hooks 深入理解与最佳实践 #

Hooks 是 React 16.8 引入的重要特性，让函数组件拥有了状态管理和副作用处理的能力。

useState：状态管理 #

const [count, setCount] = useState(0)
// 函数式更新（推荐）
setCount(prev => prev + 1)
// 不可变更新对象
setUser(prev => ({ ...prev, age: prev.age + 1 }))

useEffect：副作用处理 #

useEffect(() => {
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(setUser)
  return () => { /* 清理函数 */ }
}, [userId])

useRef：引用与持久值 #

const inputRef = useRef<HTMLInputElement>(null)
useEffect(() => { inputRef.current?.focus() }, [])

useMemo 与 useCallback #

const filteredItems = useMemo(() =>
  items.filter(item => item.name.includes(filter)),
  [items, filter]
)

const handleClick = useCallback(() => {
  setCount(c => c + 1)
}, [])

自定义 Hook #

function useLocalStorage<T>(key: string, initialValue: T) {
  const [value, setValue] = useState<T>(() => {
    const item = localStorage.getItem(key)
    return item ? JSON.parse(item) : initialValue
  })
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])
  return [value, setValue] as const
}

总结 #

Hook用途关键点
useState状态管理函数式更新
useEffect副作用依赖数组、清理函数
useRefDOM 引用不触发重渲染
useMemo缓存计算按需优化
useCallback缓存函数配合 React.memo

推荐资源 #