React Hooks 完全指南

admin

2025-11-23 05:21 阅读 2341

深入理解React Hooks的使用方法和原理，从useState到自定义Hooks

React Hooks 完全指南

React Hooks 是 React 16.8 引入的新特性，让函数组件也能使用 state 和生命周期特性。

1. useState - 状态管理

import { useState } from "react"

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


return (



Count: {count}


<button onClick={() => setCount(count + 1)}>+1

<button onClick={() => setCount(prev => prev - 1)}>-1



)

}

2. useEffect - 副作用处理

import { useEffect } from "react"

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


useEffect(() => {

// 获取数据

fetchUser(userId).then(setUser)
// 清理函数
return () => {
  console.log("cleanup")
}

}, [userId]) // 依赖数组 }

3. useContext - 跨组件通信

const ThemeContext = createContext("light")

function App() { return ( <ThemeContext.Provider value=“dark”> <Toolbar /> </ThemeContext.Provider> ) }

function Button() { const theme = useContext(ThemeContext) return }

4. useReducer - 复杂状态逻辑

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

function Counter() { const [state, dispatch] = useReducer(reducer, { count: 0 }) return ( <> {state.count} <button onClick={() => dispatch({ type: “increment” })}>+ </> ) }

5. useMemo 与 useCallback

// 缓存计算结果
const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b)
}, [a, b])

// 缓存回调函数 const handleClick = useCallback(() => { doSomething(a, b) }, [a, b])

6. 自定义 Hook

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

useEffect(() => { localStorage.setItem(key, JSON.stringify(value)) }, [key, value])

return [value, setValue] }

Hooks 使用规则

只在函数组件顶层调用 Hooks
不要在循环、条件或嵌套函数中调用
自定义 Hook 名称以 use 开头