Hooks 让函数组件拥有状态、生命周期与逻辑复用能力。理解 Hooks 的关键，是两条铁律，以及「每次渲染都是一次函数调用」这个前提。

1. 为什么有 Hooks

Hooks 之前，只有类组件能有状态，逻辑复用靠高阶组件 / render props，导致「层层包裹」和 this 之痛。Hooks 把状态与副作用直接搬进函数组件，并把复用单位从「组件」变成「函数」。

后端类比：Hooks 像切面 / 拦截器——在函数组件的调用链上按顺序登记「状态」「副作用」「缓存」等能力。

React 的心智模型只有一句：UI 是状态的函数，即 UI = f(state)。状态变了，React 重新计算并更新对应的界面。它用 JavaScript（而非模板）描述结构，灵活度和类型友好度高。

1. 心智模型：UI = f(state)

不用框架时，界面靠手动操作 DOM。React 把关注点从「怎么改 DOM」转成「当前状态应该长什么样」：

// 声明：给定 state，返回 UI
function Counter({ count }) {
  return <button>点击了 {count} 次</button>;
}