React Hooks的理解？常用的有哪些？

一、React Hooks 的理解

简单来说：

Hooks = 在函数组件中"钩入（Hook）"React状态和生命周期的函数。

它解决了几个问题：

1 让函数组件也能有状态

以前函数组件只能展示 UI，没有状态。

scss 复制代码

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

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

2 替代复杂的生命周期

类组件生命周期：

复制代码

componentDidMount
componentDidUpdate
componentWillUnmount

Hooks 用 useEffect 统一管理。

3 逻辑复用更简单

以前复用逻辑需要：

HOC（高阶组件）
Render Props

Hooks 可以直接抽成函数：

scss 复制代码

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

二、常用 React Hooks

开发中最常用的大概 7 个。

1 useState（最常用）

用于 管理组件状态。

javascript 复制代码

import { useState } from "react"

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

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

特点：

useState(初始值)
返回 [state, setState]
setState 会触发组件重新渲染

2 useEffect（生命周期）

用于 处理副作用：

请求接口
操作 DOM
订阅事件
定时器

javascript 复制代码

import { useEffect } from "react"

useEffect(() => {
  console.log("组件加载")

  return () => {
    console.log("组件卸载")
  }
}, [])

依赖数组控制执行：

写法	含义
useEffect(fn)	每次渲染执行
useEffect(fn, \[\])	只执行一次
useEffect(fn, $a$ )	a变化执行

3 useRef

用于：

1️⃣ 获取 DOM

2️⃣ 保存变量（不触发渲染）

ini 复制代码

const inputRef = useRef(null)

<input ref={inputRef} />

inputRef.current.focus()

4 useContext

用于 跨组件传值（避免 props 逐层传递）。

javascript 复制代码

const ThemeContext = createContext()

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  )
}

function Child() {
  const theme = useContext(ThemeContext)
}

5 useMemo（性能优化）

缓存计算结果

防止重复计算。

scss 复制代码

const result = useMemo(() => {
  return expensiveFunction(a, b)
}, [a, b])

只有 a b 变化才重新计算。

6 useCallback

缓存函数

防止子组件重复渲染。

javascript 复制代码

const handleClick = useCallback(() => {
  console.log("click")
}, [])

常配合 React.memo 使用。

7 useReducer

用于 复杂状态管理（类似 Redux）。

scss 复制代码

const [state, dispatch] = useReducer(reducer, initialState)

dispatch({ type: "add" })

适合：

多状态
状态依赖复杂

三、Hooks 使用规则（面试必问）

React Hooks 必须遵守两个规则：

1 只能在函数组件或自定义 Hook 中使用

❌ 错误

scss 复制代码

if (a) {
  useState()
}

2 必须在组件顶层调用

不能在：

if
for
function

里面调用。

四、自定义 Hook（高级）

可以封装逻辑。

例如封装请求：

scss 复制代码

function useFetch(url) {
  const [data, setData] = useState(null)

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData)
  }, [url])

  return data
}

使用：

ini 复制代码

const data = useFetch("/api/user")

五、React Hooks 优势总结

优势	说明
代码更简洁	不需要 class
逻辑复用	自定义 Hook
生命周期更清晰	useEffect
减少嵌套	不需要 HOC