1.React Hooks 为什么不能写在 if 里面？底层原理是什么？
🧠 一句话核心
👉 Hooks 依赖调用顺序来记录状态，所以不能写在条件判断中
📦 展开说（面试标准版）
React 在执行函数组件时：
👉 会维护一个 hooks 链表（或数组）
每次调用 useState / useEffect：
👉 按顺序依次记录
❗关键点：
👉 React 不是通过变量名识别 Hooks
👉 而是通过：
👉 "第几个调用" 来对应状态
🚨 如果写在 if 里会发生什么？
if (flag) {
useEffect(() => {})
}
当 flag 变化时：
-
第一次：执行了 useEffect
-
第二次：没执行
👉 就会导致：
👉 hooks 顺序错乱
❗结果：
-
状态错位
-
数据混乱
-
甚至报错
🎯 总结一句话
👉 Hooks 必须在组件顶层调用，保证每次执行顺序一致
📦 举个最关键的例子（一步一步看）
function Demo({ flag }) {
const [a, setA] = useState(1)
if (flag) {
useEffect(() => {
console.log('effect')
})
}
const [b, setB] = useState(2)
return null
}
🧨 第一次渲染（flag = true）
执行顺序：
1️⃣ useState(a) → 👉 位置1
2️⃣ useEffect → 👉 位置2
3️⃣ useState(b) → 👉 位置3
👉 React 内部记录：
a, effect, b
🧨 第二次渲染（flag = false）
执行顺序变了：
1️⃣ useState(a) → 👉 位置1
❌ useEffect 不执行
2️⃣ useState(b) → 👉 位置2（⚠️问题来了）
👉 React 以为：
a, ???, ???
但实际上你现在是：
a, b
🚨 关键错误发生了
👉 React 还以为：
-
第2个 Hook 是 useEffect
-
但你现在第2个 Hook 变成 useState(b)
👉 于是：
💥 b 的状态被错认成 effect
🎯 结果就是
-
状态错位
-
数据混乱
-
报错（Hooks mismatch）