Hooks 的原理是什么？为什么不能写在条件语句里？

Fiber.memoizedState
   │
   ▼
[useState: count] ──next──► [useState: text] ──next──► [useEffect: 依赖和清理函数] ──next──► null

let hooks = [] // 按调用顺序存放每个 Hook 的状态
let cursor = 0 // 本次渲染执行到第几个 Hook
let Component = null

function useState(initialValue) {
  const index = cursor++ // 记住自己是第几个 Hook
  if (index === hooks.length) hooks.push(initialValue) // 首次渲染：用初始值创建

  const setState = (action) => {
    const next = typeof action === 'function' ? action(hooks[index]) : action
    if (Object.is(next, hooks[index])) return // 值没变，跳过渲染
    hooks[index] = next
    render() // 真实实现是把更新放进队列，再批量调度渲染
  }
  return [hooks[index], setState]
}

function render() {
  cursor = 0 // 每次渲染都从第一个 Hook 开始
  return Component()
}

function Counter() {
  const [count, setCount] = useState(0)
  const [text, setText] = useState('hello')
  console.log(`count = ${count}, text = ${text}`)
  return { increment: () => setCount((c) => c + 1), setText }
}

Component = Counter
const ui = render() // count = 0, text = hello
ui.increment() // count = 1, text = hello

function Profile({ showAge }) {
  const [name, setName] = useState('Tom')
  if (showAge) {
    const [age, setAge] = useState(18) // 违反规则：写在条件语句里
  }
  const [email, setEmail] = useState('')
  // ...
}

第 1 次渲染（showAge = true）      第 2 次渲染（showAge = false）
第 0 个 ← useState('Tom')          useState('Tom') → 读第 0 个：'Tom'，正确
第 1 个 ← useState(18)             （被跳过）
第 2 个 ← useState('')             useState('')    → 读第 1 个：18，错位

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth)
  useEffect(() => {
    const onResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', onResize)
    return () => window.removeEventListener('resize', onResize)
  }, [])
  return width
}

function Header() {
  const width = useWindowWidth() // 每个调用它的组件，都有自己独立的 width 状态
  return width < 768 ? <MobileNav /> : <DesktopNav />
}