Lazy loaded image
技术分享
React Hooks 是什么？
字数 529阅读时长≈ 2 分钟
2021-10-3
2025-5-10
type
status
date
slug
summary
tags
category
icon
password

React Hooks 是什么？彻底搞懂 React 中的 Hook 机制

在之前的文章中，我们提到了 React中的 useRef 和 useState。这些都是React Hooks。在 React 函数组件中，Hooks 是一种让你无需编写 class 就能使用状态等 React 特性的方式。

一、为什么需要 Hooks？

在 Hooks 出现前，函数组件是“无状态”的，无法使用生命周期和本地状态。复杂逻辑只能写在 class 组件里，导致：
  • 组件逻辑难以复用（如订阅、定时器等）
  • 生命周期函数中逻辑混杂（如 componentDidMount）
  • 高阶组件和 render props 写法繁琐
于是 React 16.8 引入了 Hooks，用于解决这些问题。

二、什么是 Hooks？

Hooks 是一些可以让你“钩入” React 状态逻辑的函数，它们只适用于函数组件或自定义 Hook 中。
常见的内置 Hook：
Hook 名称
用途
useState
添加状态
useEffect
副作用处理（生命周期）
useRef
持久化变量、不触发渲染
useContext
跨层组件状态共享
useMemo
性能优化（缓存计算）
useCallback
缓存函数引用，避免子组件重复渲染

三、Hook 的使用规则

  • 只能在最顶层调用（不能放在 if、for 里）
  • 只能在函数组件或自定义 Hook 中使用
这样做是为了确保 React 能在每次渲染时以同样的顺序执行 Hook 调用。

四、useState 和 useRef 的联系与区别

参见上一篇文章《React 中的 useRef 与 useState 的区别与应用》：
Hook
触发渲染
应用场景
useState
✅ 会
UI 状态控制
useRef
❌ 不会
保存引用、缓存变量

示例整合：

五、自定义 Hook 是什么？

你可以将多个 Hook 的逻辑组合成自己的 Hook，便于复用。

六、总结：Hooks 带来了什么？

  • 函数组件变得更加强大
  • 更好的逻辑复用能力（自定义 Hook）
  • 更清晰的组织代码方式
  • 更轻量、组件更纯粹
上一篇
React高阶组件(HOC)的使用
下一篇
React 中的 useRef 与 useState
目录