React 心智模型
约 561 字大约 2 分钟
2025-11-29
React 就是让数据像水一样，只往前流、只向下流，每一次渲染就是水从源头重新流一遍整个应用。
| 概念 | 在“水流模型”里是什么意思 |
|---|---|
| props | 水从父组件流到子组件的唯一通道 |
| state | 水流到某个位置时突然挖的小水潭（局部蓄水），下次水流再来的时候会先把这个水潭里装的是什么 |
| 组件重新渲染 | 水从最顶层又重新开始流一遍（ReactDOM.createRoot → App → …） |
| 自定义 Hook | 水流到一个位置时，突然拐进一条事先挖好的支流管道（useXxx 函数），走完再流回来继续主干道 |
| setState | 把某个水潭里的水换掉 → 触发下一轮从头开始的“新水流” |
| useEffect | 水流经过某个位置时，偷偷记下来：“上次我流过这里的时候你让我干了啥，下次再流到这里我再干一遍” |
| Context | 在高处挖了一条跨山的大渠，水不用一级一级往下倒，直接从大渠里接 |
| Redux / Zustand | 在山顶建了一个大水库，全应用任何地方都可以直接接水库的水管 |
比如
useChatRoom({ serverUrl, roomId });脑子里应该瞬间闪过的画面就是：
“这一刻，水流到了 ChatRoom 组件这里，我把当前这股水里含着的 serverUrl 和 roomId 两个水滴，直接灌进了 useChatRoom 这条支流管道里，让它带着最新鲜的水继续往下游跑。”
单向、不可逆、每次都重新从头流一遍、所有地方拿到的都是当前这一轮的水，这就是 React 最纯粹、最暴力、最优雅的哲学。
一旦把这个画面刻在脑子里，所有规则就都变成自然而然的事了：
- 为什么不能直接改 props？ → 水不能往回流
- 为什么每次渲染 Hook 都是最新值？ → 新一轮的水刚从上游来，当然最新
- 为什么不要在渲染期间改 state？ → 你在水流的过程中往上游扔石头，水会乱套
- 为什么 useEffect 要写依赖数组？ → 告诉 React“我只关心这几个水滴变没变”