{"name":"React","id":"编程语言-JavaScript-React","content":"# React\n\n## 0. React 的第一性原理（Why React Exists）\n\n### 0.1 React 要解决的本质问题\n\n> **如何在状态不断变化的情况下，稳定、可预测、高性能地描述 UI？**\n\nReact 的核心假设：\n\n```text\nUI = f(state)\n```\n\n* UI 是状态的纯函数\n* 开发者只关心“状态长什么样”\n* 框架负责“如何更新 UI”\n\n👉 React 的本质不是 DOM 库，而是一个 **UI 描述 + 调度系统**\n\n---\n\n### 0.2 React 的三层稳定架构\n\n```\n┌────────────────────────────┐\n│ 表达层（What）             │ JSX / React Element\n├────────────────────────────┤\n│ 计算层（How to describe）  │ Component / Hooks\n├────────────────────────────┤\n│ 调度层（When & How apply） │ Fiber / Reconciliation / Commit\n└────────────────────────────┘\n```\n\n这是理解 React 的**总心智模型**，后续所有概念都可以落在这三层中。\n\n---\n\n## 1. JSX：UI 描述语言（表达层）\n\n### 1.1 JSX 的本质\n\n> JSX 不是模板，也不是 HTML\n> **JSX 是 UI 的结构化描述语言**\n\n```jsx\n<header className=\"App-header\">\n  <h1>main</h1>\n</header>\n```\n\n其本质等价于：\n\n```js\nReact.createElement(type, props, children)\n```\n\n无论 React 17 前后的实现如何变化，**不变的是：**\n\n* JSX → React Element（不可变对象）\n* Element = UI 的“快照描述”，不是组件实例\n\n---\n\n### 1.2 Element / Component / DOM 的边界\n\n| 概念            | 本质             |\n| ------------- | -------------- |\n| JSX           | 语法糖            |\n| React Element | UI 的结构化描述      |\n| Component     | 生成 Element 的函数 |\n| DOM           | Element 的物理投影  |\n\n👉 **React 从不“操作 DOM”，它只比较描述**\n\n---\n\n### 1.3 JSX 的工程约束（为什么会踩坑）\n\n* `return` 换行问题：\n  👉 JSX 本质仍是 JavaScript 的表达式语法\n* 组件首字母大写：\n  👉 React 用**类型**区分 DOM Element 与 Component Element\n\n---\n\n## 2. 渲染与协调：描述如何变成现实（调度层）\n\n## 2.1 两棵树模型\n\nReact 内部永远在处理两棵树：\n\n```\n旧 Element Tree\n新 Element Tree\n```\n\n> React 不关心“你改了什么”，\n> **它只比较“你现在想要什么”**\n\n---\n\n## 2.2 Reconciliation 的设计哲学\n\nReact Diff 的核心不是“最优”，而是：\n\n> **在 O(n) 时间内，得到足够好的更新结果**\n\n### 三条稳定原则\n\n1. **类型决定命运**\n\n   * 不同类型 → 整棵子树重建\n2. **Key 决定身份**\n\n   * Key 是元素的“社会身份”，不是索引\n3. **顺序假设**\n\n   * 默认假设列表是顺序稳定的\n\n👉 这是**工程取舍**，不是算法缺陷。\n\n---\n\n## 3. Fiber：为什么 React 可以中断渲染\n\n### 3.1 Fiber 的本质\n\n> Fiber = **可中断的工作单元（Work Unit）**\n\n* 每个 FiberNode = 一个组件或元素\n* Fiber 构成一棵可遍历、可暂停的链表结构\n\n---\n\n### 3.2 Render Phase vs Commit Phase\n\n| 阶段           | 特性        | 约束    |\n| ------------ | --------- | ----- |\n| Render Phase | 可中断 / 可重做 | 必须纯函数 |\n| Commit Phase | 同步 / 不可中断 | 允许副作用 |\n\n👉 这就是为什么：\n\n* render / 函数组件 **不能有副作用**\n* effect 被延迟执行\n\n---\n\n## 4. 组件模型：描述 UI 的计算单元（计算层）\n\n## 4.1 组件的本质\n\n> Component = `(props, state, context) → Element`\n\n* 类组件：状态挂在实例上\n* 函数组件：状态由 Hooks 外挂管理\n\n---\n\n## 4.2 数据流的第一性原则\n\n### 单向数据流不是限制，而是治理手段\n\n```\nState → Props → Child\n           ↑\n        Callback\n```\n\n* 保证因果关系清晰\n* 保证更新路径可追踪\n* 为调试、并发、回放打基础\n\n---\n\n## 5. 生命周期：从“过程 API”到“阶段模型”\n\n### 5.1 类组件生命周期的真实价值\n\n生命周期不是为了“用”，而是为了**划分阶段**：\n\n| 阶段         | 本质      |\n| ---------- | ------- |\n| Render     | 描述 UI   |\n| Pre-Commit | 读取旧 DOM |\n| Commit     | 应用变更    |\n| Cleanup    | 释放资源    |\n\n👉 Hooks 本质上是**对生命周期的函数化重构**\n\n---\n\n## 6. Hooks：函数组件的状态与副作用系统\n\n## 6.1 Hooks 的第一性原理\n\n> Hooks = **在函数执行过程中，为 Fiber 绑定状态单元**\n\n关键约束来源：\n\n* Hooks 以**链表**形式挂在 FiberNode 上\n* 顺序即身份\n\n👉 所有 Hooks 规则都来自这一事实\n\n---\n\n## 6.2 状态 Hooks 的分工模型\n\n| Hook       | 解决的问题     |\n| ---------- | --------- |\n| useState   | 局部状态      |\n| useReducer | 复杂状态机     |\n| useRef     | 脱离渲染的可变容器 |\n\n---\n\n## 6.3 副作用 Hooks 的时间语义\n\n| Hook            | 执行时机      | 用途      |\n| --------------- | --------- | ------- |\n| useLayoutEffect | DOM 更新后同步 | 布局测量    |\n| useEffect       | 提交后异步     | IO / 订阅 |\n\n👉 Effect 的存在，是为了**保护 Render Phase 的纯度**\n\n---\n\n## 6.4 useMemo / useCallback 的本质\n\n> React 性能问题 ≠ 计算慢\n> **而是“引用不稳定”**\n\n* useMemo：缓存“值”\n* useCallback：缓存“引用”\n\n它们不是优化工具，而是**稳定性工具**\n\n---\n\n## 7. 组件复用与扩展机制\n\n### 7.1 React.memo：渲染的幂等性保证\n\n> memo = 声明式的 shouldComponentUpdate\n\n前提：\n\n* 组件必须是**纯函数**\n* 副作用必须外置\n\n---\n\n### 7.2 高阶组件（HOC）\n\n本质模式：**装饰器**\n\n* 横切关注点（日志、权限、注入）\n* 与 Hooks 的主要区别：\n\n  * HOC 是结构级\n  * Hooks 是逻辑级\n\n---\n\n## 8. 事件系统：一致性优先于原生行为\n\n> React 合成事件的目标不是“更快”，\n> 而是 **跨浏览器一致性 + 可控传播模型**\n\n---\n\n## 9. 应用状态管理：何时需要 Redux？\n\n## 9.1 状态的分层治理模型\n\n| 状态层级 | 工具       |\n| ---- | -------- |\n| 组件私有 | useState |\n| 组件协作 | Props    |\n| 跨层共享 | Context  |\n| 全局业务 | Redux    |\n\n👉 Redux 的核心价值不是“存状态”，而是：\n\n* 可预测\n* 可回溯\n* 可观测\n\n---\n\n## 10. React 的长期演进方向（稳定认知）\n\n### 不变的部分\n\n* UI = f(state)\n* 单向数据流\n* 描述优先于命令\n\n### 演进的部分\n\n* Class → Function\n* Sync → Concurrent\n* Client → Server Components\n\n---\n\n## 11. 总结：React 的工程哲学\n\n> React 是一套：\n>\n> * 用**函数描述 UI**\n> * 用**调度管理复杂度**\n> * 用**约束换取可维护性**\n>   的系统\n\n## 关联内容（自动生成）\n\n- [/编程语言/JavaScript/Vue.md](/编程语言/JavaScript/Vue.md) 作为现代前端框架的代表，Vue 与 React 在「声明式」「响应式」「组件化」方面有着相似的理念，对比学习有助于深入理解前端框架的本质\n- [/编程语言/JavaScript/JavaScript.md](/编程语言/JavaScript/JavaScript.md) React 的实现基础是 JavaScript，理解 JavaScript 的值模型、类型系统和语言特性对于掌握 React 的工作机制至关重要\n- [/软件工程/架构/Web前端/Web前端.md](/软件工程/架构/Web前端/Web前端.md) React 是现代 Web 前端开发的重要组成部分，了解整个前端生态系统有助于理解 React 的定位和作用\n- [/软件工程/架构/Web前端/前端工程化.md](/软件工程/架构/Web前端/前端工程化.md) React 项目的成功实施离不开前端工程化体系的支持，包括构建、部署、测试等环节\n- [/编程语言/编程范式/函数式编程.md](/编程语言/编程范式/函数式编程.md) React 的设计理念深受函数式编程影响，特别是不可变数据和纯函数的概念在 Hooks 和组件设计中得到了广泛应用\n","metadata":"tags: ['前端', '编程语言', '组件化']","hasMoreCommit":false,"totalCommits":6,"commitList":[{"date":"2026-02-12T14:07:03+08:00","author":"MY","message":"doc: 整理标签","hash":"290b3e8ad18f48832ac282290238d020fc030a88"},{"date":"2025-12-30T15:04:34+08:00","author":"MY","message":"docs(React): 重构React学习文档添加第一性原理和架构解析","hash":"388ce35e08ff3b379d62c09666e73b577c01bfc3"},{"date":"2024-07-30T20:12:00+08:00","author":"MY","message":"✏React","hash":"46af96abb60cd848b6d16f48b87941f956bc9360"},{"date":"2024-07-24T19:38:29+08:00","author":"MY","message":"✏React","hash":"74a47834d1d247c36f08f50d35eded1084393b1d"},{"date":"2024-07-23T19:43:44+08:00","author":"MY","message":"✏React","hash":"789f80c0f40246b61f7b4eb724f8283b8493d225"},{"date":"2024-07-22T20:12:51+08:00","author":"MY","message":"✏React","hash":"59bdf8c85ded6fc745e46a158e9973090ac28b8c"}],"createTime":"2024-07-22T20:12:51+08:00"}