React Hooks 详解

🎯 概述

React Hooks 是 React 16.8 引入的新特性，让我们可以在函数组件中使用状态和生命周期等功能。

📚 常用 Hooks

useState

用于在函数组件中添加状态。

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

useEffect

用于处理副作用，类似于类组件的生命周期。

import { useState, useEffect } from 'react'

function UserProfile({ userId }) {
  const [user, setUser] = useState(null)

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(res => res.json())
      .then(data => setUser(data))
  }, [userId])

  return user ? <div>{user.name}</div> : <div>Loading...</div>
}

useCallback

用于缓存函数，避免不必要的重新渲染。

import { useState, useCallback } from 'react'

function Parent() {
  const [count, setCount] = useState(0)
  
  const handleClick = useCallback(() => {
    setCount(c => c + 1)
  }, [])

  return <Child onClick={handleClick} />
}

useMemo

用于缓存计算结果。

import { useMemo } from 'react'

function ExpensiveComponent({ items }) {
  const expensiveValue = useMemo(() => {
    return items.reduce((sum, item) => sum + item.value, 0)
  }, [items])

  return <div>Total: {expensiveValue}</div>
}

🎯 最佳实践

1. 只在函数组件的顶层调用 Hooks
2. 只在 React 函数中调用 Hooks
3. 合理使用依赖数组
4. 避免过度使用 useMemo 和 useCallback

---

React Hooks 让函数组件更强大！ ⚛️