React MOC
React 核心概念、Hooks、工程实践与生态相关笔记入口。
#frame
#react
#moc
#evergreen
React MOC
动态知识目录（Base）
Obsidian Base 是本地动态视图；网页端请浏览相关知识笔记。
知识总览
filters:
and:
- 'file.ext == "md"'
- 'file.inFolder("z")'
- 'this.file.links.contains(file)'
- 'file.path != this.file.path'
formulas:
knowledge: 'file.asLink(title)'
properties:
formula.knowledge:
displayName: 知识
note.description:
displayName: Description
note.mastery:
displayName: Mastery
views:
- type: table
name: 知识总览
order:
- formula.knowledge
- note.description
- note.mastery
columnSize:
formula.knowledge: 280
note.description: 760
note.mastery: 56系统路径见 React 学习路线 MOC。
阶段子 MOC
这张地图只负责给 React 建立阅读路径，不承担完整正文。
从哪里开始
- React
- jsx
- React Hooks
- React 生命周期与 Hooks
- React中的props、state和ref
- React组件渲染与重渲染
- useEffect
- React 状态模型 vs Vue3 响应式模型
Hooks 主线
- React Hooks - 先理解 Hooks 为什么存在、底层依赖什么机制
- useState - 先吃透状态和不可变更新
- React 状态模型 vs Vue3 响应式模型 - 对照理解 state snapshot 和依赖追踪
- useEffect - 再理解副作用和依赖数组
- useRef - 处理不参与渲染的可变值与闭包旧值
- useContext - 理解跨层共享值
- react-use-reducer - 复杂状态转移
- useMemo / useCallback - 再进入性能优化
- react-custom-hooks - 用逻辑复用收尾
核心概念
- React - React 的整体定位与学习主线
- jsx - JSX 语法与组件表达方式
- React Hooks - Hooks 的整体分工与使用边界
- React 生命周期与 Hooks - 类组件生命周期方法与 Hooks 副作用表达的对应关系
- useState - 组件状态的最小入口
- React 状态模型 vs Vue3 响应式模型 - 对照理解 React state snapshot 和 Vue 响应式
- react-use-reducer - 复杂状态转移的组织方式
- useRef - 不参与渲染的可变值与 DOM 引用
- useContext - 跨层级共享值
- react-custom-hooks - 逻辑复用的标准方式
- useEffect - 副作用同步的高频误区
- React useEffect vs useLayoutEffect - 绘制时机与选择边界
- react-use-layout-effect - 绘制前同步副作用
- useMemo - 缓存计算结果
- useCallback - 缓存函数引用
- react-memo - 组件级跳过重复渲染
- react-component-design-principles - 组件职责、状态位置与组合边界
- React 类型化包装组件与多态组件 - 继承原生/第三方 props、ref 与变体类型
- React组件渲染与重渲染 - 理解 render、rerender 和性能关系
- React 中 props 身份与重渲染 - 理解浅比较、引用变化与 memo 失效
- React中的Context与状态管理边界 - Context 与外部状态管理的分工
- react-state-management-selection - 本地状态、Context 与常见状态方案的选型
- React副作用与外部系统同步总览 - effect 类 Hook 的统一边界
- React中的事件处理与状态更新 - 交互、状态与渲染闭环
- react-list-rendering-and-key - 列表节点身份与 key 的作用
- react-state-lifting-vs-state-colocation - 共享状态与局部状态的位置选择
- react-list-performance-optimization - 长列表的优化主线
- react-form-performance - 输入链路与大表单性能边界
- react-hydration-mismatch - SSR 接管时的一致性问题
- react-use-effect-and-ssr - effect 与服务端渲染阶段的关系
- react-use-layout-effect-and-ssr - layout effect 与浏览器时机边界
- react-server-vs-client-components - 服务端与客户端职责划分
- react-ssr-data-fetching - 首屏数据与客户端增量数据的分工
- react-server-render-vs-client-request-boundary - 服务端直出与客户端请求边界
- react-ssr-architecture-boundaries - SSR 各层职责的整体桥接
- react-ssr-vs-hydration-vs-server-components - SSR、接管与服务端组件的区别
- React Stack 架构 - React 16 之前的 Stack Reconciler 架构
- React Stack vs Fiber 架构对比 - Stack Reconciler 与 Fiber 架构对比
- React中的props、state和ref - 三类核心数据来源的边界
- react-performance-overview - 渲染、缓存与列表优化主线
- react-state-management-selection - 状态管理选型
- react-hooks-interview-deep-dive - Hooks 面试专题深度解析
- React Class Component vs Function Component - 类组件与函数组件的模型和迁移边界
- react-performance-overview - React 性能优化总览
学习与面试
-
如何学习前端底层原理 - 从真实问题到抽象层、文档/源码与最小实验
-
react-learning-roadmap - React 的推荐学习顺序
-
react-typescript-component-and-hook-types - React 组件、Hook 与 TypeScript 类型边界
-
react-interview-high-frequency - React 高频面试主题索引
-
react-first-impressions - JSX、事件、状态与 Hook 的入门主线
对照理解
国际化与生态
- react-intl - React 中基于 Intl 的国际化方案
- farmer-motion
状态管理与扩展
- zustand
- 四层状态架构 - URL / Query / Streaming / UI 四层分工
- 组件内服务端状态与客户端状态的区分
- URL 作为唯一身份源
- 派生状态模式
- 从 useState 迁移到 TanStack Query
Digital Biome