一、四个 Hook 的一句话定义（先记住）

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

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

---

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

1️⃣ useState —— 本地 UI 状态

用来干嘛？

• 表单输入
• Dialog 是否打开
• Tab 切换
• loading（本地）

const [open, setOpen] = useState(false)

特点

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

🗣 面试说法：

useState manages local component state that affects rendering.

---

2️⃣ useEffect —— 副作用管理

什么是副作用？

👉 不是为了算 JSX 的事情

• 数据请求
• 订阅事件
• DOM 操作
• 日志 / 上报

useEffect(() => {
  fetchUsers()
}, [])

关键点（外企爱问）

• 依赖数组决定何时执行
• cleanup 防止内存泄漏

useEffect(() => {
  const id = setInterval(...)
  return () => clearInterval(id)
}, [])

🗣 面试说法：

useEffect handles side effects outside the render lifecycle.

---

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

解决什么问题？

避免 props drilling（层层传 props）

适合：

• 当前用户
• 主题
• 语言
• 全局配置

const ThemeContext = createContext("light")

const theme = useContext(ThemeContext)

特点

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

🗣 面试说法：

useContext provides shared data without prop drilling.

---

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

用来干嘛？

• 派生数据
• 计算成本不低
• 避免重复计算

const stats = useMemo(() => compute(users), [users])

重要区别（常见误区）

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

🗣 面试说法：

useMemo memoizes expensive derived values.

---

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

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

📌 它们不能互相替代

---

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

1️⃣ 父 → 子（最常见）

<Child name={name} />

function Child({ name }) {}

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

---

2️⃣ 子 → 父（回调）

<Child onSubmit={setValue} />

function Child({ onSubmit }) {
  onSubmit("data")
}

👉 本质：函数也是 props

---

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

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

👉 把 state 提到 Parent

---

4️⃣ 跨多层组件（useContext）

<UserContext.Provider value={user}>
  <App />
</UserContext.Provider>

const user = useContext(UserContext)

🗣 面试说法：

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

---

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

👉 不是 props，也不是 context

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

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

---

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

适合：

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

---

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

在你的项目里：

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