Glittering's blog

Appearance

一、四个 Hook 的定义 ​

Hook一句话作用
useState管理组件内部可变状态
useEffect处理副作用（和 React 渲染无关的事情）
useContext跨层级共享状态 / 依赖
useMemo缓存派生计算结果，避免重复计算

👉 它们解决的是完全不同的问题

二、逐个讲清楚（面试级） ​

1️⃣ useState —— 本地 UI 状态 ​

用来干嘛？ ​

  • 表单输入
  • Dialog 是否打开
  • Tab 切换
  • loading（本地）
tsx
const [open, setOpen] = useState(false)

特点 ​

  • 状态变化 → 组件重新渲染
  • 只属于当前组件

🗣 面试说法：

useState manages local component state that affects rendering.

2️⃣ useEffect —— 副作用管理 ​

什么是副作用？ ​

👉 不是为了算 JSX 的事情

  • 数据请求
  • 订阅事件
  • DOM 操作
  • 日志 / 上报
tsx
useEffect(() => {
  fetchUsers()
}, [])

关键点（外企爱问） ​

  • 依赖数组决定何时执行
  • cleanup 防止内存泄漏
tsx
useEffect(() => {
  const id = setInterval(...)
  return () => clearInterval(id)
}, [])

🗣 面试说法：

useEffect handles side effects outside the render lifecycle.

3️⃣ useContext —— 跨组件共享数据 ​

解决什么问题？ ​

避免 props drilling（层层传 props）

适合：

  • 当前用户
  • 主题
  • 语言
  • 全局配置
tsx
const ThemeContext = createContext("light")
tsx
const theme = useContext(ThemeContext)

特点 ​

  • 所有消费组件 都会 re-render
  • 不适合高频变化数据

🗣 面试说法：

useContext provides shared data without prop drilling.

4️⃣ useMemo —— 缓存“计算结果” ​

用来干嘛？ ​

  • 派生数据
  • 计算成本不低
  • 避免重复计算
tsx
const stats = useMemo(() => compute(users), [users])

重要区别（常见误区） ​

  • ❌ 不是用来“避免 re-render”
  • ✅ 只缓存 计算结果

🗣 面试说法：

useMemo memoizes expensive derived values.

三、四个 Hook 的核心区别（对比表） ​

维度useStateuseEffectuseContextuseMemo
是否存状态✅❌❌❌
是否触发渲染✅❌间接❌
是否处理副作用❌✅❌❌
是否跨组件❌❌✅❌
是否性能优化❌❌❌✅

📌 它们不能互相替代

四、组件间传值的所有方式（重点） ​

1️⃣ 父 → 子（最常见） ​

tsx
<Child name={name} />
tsx
function Child({ name }) {}

✅ 最推荐 ❌ 不适合层级太深

2️⃣ 子 → 父（回调） ​

tsx
<Child onSubmit={setValue} />
tsx
function Child({ onSubmit }) {
  onSubmit("data")
}

👉 本质：函数也是 props

3️⃣ 兄弟组件（状态提升） ​

tsx
<Parent>
  <A />
  <B />
</Parent>

👉 把 state 提到 Parent

4️⃣ 跨多层组件（useContext） ​

tsx
<UserContext.Provider value={user}>
  <App />
</UserContext.Provider>
tsx
const user = useContext(UserContext)

🗣 面试说法：

I use context for cross-cutting concerns like auth or theme.

5️⃣ 服务端状态（React Query） ​

👉 不是 props，也不是 context

tsx
useQuery({ queryKey: ["users"], queryFn })

多个组件共享同一份 server data。

6️⃣ 状态管理库（Redux / Zustand） ​

适合：

  • 状态复杂
  • 多页面共享
  • 频繁更新

五、结合你项目的真实选择（非常重要） ​

在你的项目里：

场景用什么
Dialog 开关useState
表单提交副作用useMutation
Users 列表React Query
用户统计useMemo
主题 / 登录态useContext

Copyright © 2026