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“我只关心这几个水滴变没变”