React Hooks 最佳实践指南

Hooks 基础

Hooks 让你在不编写 class 的情况下使用 state 和其他 React 特性。

核心 Hooks

useState

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

useEffect

useEffect(() => {
  // 组件挂载和依赖变化时执行
  const subscription = api.subscribe()
  
  return () => {
    // 清理函数
    subscription.unsubscribe()
  }
}, [dependency])  // 依赖数组

useContext

const ThemeContext = createContext("light")

function ThemedButton() {
  const theme = useContext(ThemeContext)
  return <button className={theme}>Click</button>
}

useReducer

const reducer = (state, action) => {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 }
    default:
      return state
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 })

自定义 Hooks

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

// 使用
const [name, setName] = useLocalStorage("name", "Guest")

性能优化 Hooks

useMemo

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

useCallback

const handleClick = useCallback(() => {
  doSomething(a, b)
}, [a, b])

常见陷阱

1. 条件调用 Hooks

// ❌ 错误
if (condition) {
  useState()
}

// ✅ 正确
const [value, setValue] = useState()
if (condition) { ... }

2. 依赖数组遗漏

// ❌ 可能导致 stale closure
useEffect(() => {
  console.log(count)
}, [])

// ✅ 正确
useEffect(() => {
  console.log(count)
}, [count])

3. 对象/数组作为依赖

// ❌ 每次渲染都创建新对象
useEffect(() => {}, [{ id: 1 }])

// ✅ 使用 useMemo 或单独状态
const config = useMemo(() => ({ id: 1 }), [])
useEffect(() => {}, [config])

实用自定义 Hooks

useFetch

function useFetch(url) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)
  
  useEffect(() => {
    async function fetchData() {
      try {
        const res = await fetch(url)
        const json = await res.json()
        setData(json)
      } catch (err) {
        setError(err)
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [url])
  
  return { data, loading, error }
}

useDebounce

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value)
  
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value)
    }, delay)
    
    return () => clearTimeout(handler)
  }, [value, delay])
  
  return debouncedValue
}

最佳实践

1. 保持 Hook 函数纯净
2. 合理拆分大组件
3. 使用 ESLint 插件检查依赖
4. 自定义 Hook 以 use 开头
5. 避免过度优化

掌握 Hooks 让 React 代码更简洁、更可复用！