跳到主要内容

什么是自定义Hook

面试速答​

  • 以下内容以 React 18 为准。
  • 自定义 Hook 本质上就是 把可复用的状态逻辑抽成一个以 use 开头的函数。
  • 它复用的是逻辑，不是组件实例本身，也不是多个组件共享同一份私有状态。

为什么要有自定义 Hook​

很多逻辑不是 UI 结构复用，而是“状态和副作用模式”复用，比如：

  • 监听窗口尺寸
  • 请求加载状态
  • 表单字段管理
  • 防抖搜索

如果每个组件都自己写一遍，重复度很高。

一个简单例子​

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)

  useEffect(() => {
    function handleResize() {
      setWidth(window.innerWidth)
    }

    window.addEventListener('resize', handleResize)
    return () => window.removeEventListener('resize', handleResize)
  }, [])

  return width
}

组件中直接用：

const width = useWindowWidth()

它的本质要讲清​

1. 自定义 Hook 不是共享状态单例​

每个组件调用 useWindowWidth()，都会拥有自己这一份 Hook 调用链路。

2. 它只是把现有 Hook 组合起来​

自定义 Hook 自己不会创造新的 React 底层能力，它依然依赖：

  • useState
  • useEffect
  • useRef
  • 其他自定义 Hook

3. 命名必须以 use 开头​

这样 React Hook 规则和 ESLint 规则才能正确识别它。

标准答法​

问：什么是自定义 Hook？​

答：就是把可复用的状态逻辑和副作用逻辑封装成一个以 use 开头的函数，让多个组件复用同样的逻辑组织方式。

问：它复用的是什么？​

答：复用的是逻辑，不是组件实例，也不是天然共享同一份状态。

易错点​

  • 以为多个组件调用同一个自定义 Hook 会自动共享状态。
  • 把普通工具函数和自定义 Hook 混为一谈。
  • 名字不以 use 开头，导致规则失效。

速记要点​

  • 自定义 Hook = 复用状态逻辑。
  • 它由多个内置 Hook 组合而成。
  • 复用逻辑，不等于共享状态。