React MOC
React 核心概念、Hooks、工程实践与生态相关笔记入口。
#tech / dev / frame
#resource / react
#type / moc
#status / evergreen
React MOC
系统路径见 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-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 面试专题深度解析
- class component 和 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