#React

Next.js 是构建全栈 Web 应用的 React 框架。它把路由、渲染、数据获取、缓存、优化和部署这些工程问题收进框架，让我能把注意力放在产品和用户体验上。

前面的笔记讲了 React 的组件、State、Hooks 和渲染机制——都是「零件」层面的知识。这篇把视角升到「应用」层面：一个真实的 React 应用里，数据从哪来、怎么分类、怎么流转。用 5 张架构图覆盖：三种状态的分类（本地/共享/服务器）、数据请求的完整链路、Loading/Error/Empty/Success 四态机、表单的输入→校验→提交流程、以及状态管理工具的选型阶梯。核心观点：不是所有数据都该进 Context 或全局 Store。

组件是 React 最小的建筑单元。这篇笔记从「为什么需要组件」出发，拆解组件的本质（函数 + props → JSX）、组件的组合模式（children、组合 vs 继承）、组件的渲染规则（纯函数、props 不变则输出不变）、以及 5 种日常高频组件模式（受控/非受控、组合组件、render props、HOC、Slot）。目标是：不是为了学 API，而是为了建立「如何拆组件」的判断力。

React 组件树里，数据怎么从 A 组件传到 B 组件？这篇笔记用 5 张图覆盖 5 种核心模式：Props（父→子单向绑定）、Children（插槽式组合）、单向数据流（数据向下、事件向上）、状态提升（兄弟组件同步）、受控与非受控（谁握着方向盘）。每种模式都附带代码示例和判断标准，读完能回答「这个状态应该放在哪、通过什么方式传」。

React 最关键的范式转变是「声明式」取代「命令式」。这篇笔记用同一个功能（计数器、Todo List、搜索过滤）在原生 JS DOM 和 React 中的两种实现做并排对比，拆解声明式的三个核心优势（可预测、自描述、易测试）和一个真实代价（diff 开销），最后给出判断框架：什么时候声明式帮你省事，什么时候命令式更直接。

Hooks 是 React 16.8 之后组件逻辑的核心载体。这篇笔记先给一张总图（5 大类 10 个 Hooks 的用途和关系），然后用 9 张图逐一拆解：useState（记事本）、useReducer（调度中心）、useContext（广播塔）、useReducer+Context（总部系统）、useRef（储物柜）、useEffect（外部世界同步器）、「你可能不需要 Effect」判断树、useMemo/useCallback（工厂缓存）、Custom Hook（工具包）。读完你能回答「这个场景该用哪个 Hook」。

React 最核心的心智模型只有一句话：UI = f(state)。理解了这句话，就理解了为什么 React 要发明组件、JSX、Virtual DOM、单向数据流这些概念。这篇笔记从「jQuery 时代的 UI 开发痛点」出发，推导出 React 的设计动机，然后拆解这个心智模型的三层含义。

setState 之后 React 到底做了什么？这篇笔记用 6 张图拆解 React 渲染的全链路：Trigger（触发）→ Render（计算）→ Commit（写入）三站地铁、Virtual DOM 蓝图与真实 DOM 建筑、Reconciliation 找不同游戏、Key 的停车位类比（以及 key=index 为什么会导致状态错位）、State 保存与重置的规则（同类型+同位置→保留，否则→重置）。读完你能解释 React 为什么快、为什么 key 不能乱给、以及 state 什么时候会被意外重置。

State 是 React 组件最核心的概念——它是组件用来「记住」交互信息的机制。这篇笔记用 6 张图覆盖 State 的全链路：事件触发（门铃）→ setState 通知重渲染（不等于直接修改变量）→ 渲染快照（每次渲染的 state 是常量）→ 更新队列（批量处理的原理）→ 不可变更新（为什么要用展开运算符而不是直接赋值）。读完你不仅会用 useState，还能解释闭包陷阱和批量更新的底层原因。