过境笔记

主题

React 低代码进阶系列总规划 ​

日期：2026-07-28

这份文档回答一个问题：基础课和进阶课做完之后，我还要学什么、按什么顺序学。

不是罗列名词，是排好施工顺序的地图。每一站告诉你：学什么、为什么现在学、前置是什么、大概几天、学完能做出什么。

1. 你现在的坐标 ​

text
[你在这]
   ↓
①  基础课 · react-lowcode-course（12 天）        ← 正在做
   函数组件 / useState / 受控表单 / 数组操作 / 条件渲染 / 样式 / useMemo / 自定义 Hook / memo
   ↓
②  进阶课 · 自定义组件动态加载（8 天）           ← 做完①再做
   上传 / 编译 / 注册渲染 / 动态表单 / 多文件 / 外部库 / 沙箱 / 版本热更新
   ↓
[后面就是这份规划要排的路]

①②两门课把"配置驱动一个组件"和"动态加载任意组件"这两块啃下来了。往后是把它变成一个真正能用的低代码平台。

2. 完整学习地图（一张表） ​

进阶课设计里给了 5 个扩展系列（系列 2～6）。但那是按主题分类的编号，不是学习顺序。对新手来说，按依赖关系和实用价值重排，效率更高：

学习顺序系列原编号预计天数一句话定位
第 1 站数据流与状态管理系列 36～7 天配置项一多，状态就乱，先把这治了
第 2 站Schema 驱动系列 57～8 天低代码的灵魂：一份 schema 自动出表单
第 3 站接口与数据源系列 46～7 天配置存后端、组件连真实数据
第 4 站拖拽与画布系列 28～10 天最像"低代码"的那一步，但依赖最多
第 5 站部署与协作系列 65～6 天让别人也能用上你做的东西

为什么把"拖拽画布"排到第 4 而不是紧接着进阶课？因为它看着酷，其实依赖前面三站全部到位（状态管理撑撤销重做、schema 撑组件属性、数据源撑保存）。新手一上来做拖拽，会同时被好几块知识卡住，很容易劝退。

3. 逐站展开 ​

第 1 站：数据流与状态管理（原系列 3，约 6～7 天） ​

为什么现在学：基础课里所有状态都堆在 LowCodeConfigPage 一个组件里。配置项一多，你会真切感受到"props 透传太深、改一个值要往下传五层"。这是 React 进阶第一个绕不过的坎。

前置：基础课 Day 1～12。

核心知识点：

  • useReducer：把零散的 setState 收敛成一个 reducer，配置变更逻辑集中管理
  • useContext：跨层级共享配置，干掉深层 props 透传
  • Context + Reducer 组合：中型应用不引外部库的标准解法
  • Zustand：轻量全局状态库，实际项目里比 Redux 常用，上手快
  • 状态设计：什么该放全局、什么该留局部

学完能做出什么：配置页的状态从"一坨"变成"有结构"，加新配置项不再牵一发动全身。

关键坑：别急着上 Redux。新手先 useReducer + Context，感受到痛点了再上 Zustand，别一上来就套重型方案。

第 2 站：Schema 驱动（原系列 5，约 7～8 天） ​

为什么现在学：这是低代码的真正内核。进阶课 Day 4 已经做过简易版（根据 props 类型渲染输入框），这一站把它做深、做通用。

前置：第 1 站（状态管理），进阶课 Day 4。

核心知识点：

  • JSON Schema 基本规范（type / enum / required / 嵌套）
  • 根据 schema 递归渲染任意深度的配置表单
  • 类型 → 控件的映射引擎（string→input、enum→select、object→分组、array→列表）
  • 表单联动（一个字段的值影响另一个字段的显隐）
  • 校验：必填、格式、范围

学完能做出什么：再也不用手写每个配置表单。给一份 schema，表单自动长出来——这才是低代码"低"在哪。

关键坑：递归渲染容易写乱。先把扁平结构做稳，再一层层加嵌套。

第 3 站：接口与数据源（原系列 4，约 6～7 天） ​

为什么现在学：到这你的配置还只活在浏览器里。真实平台要能存后端、连真实数据。

前置：第 1、2 站。

核心知识点：

  • useEffect：处理副作用（请求、订阅、同步外部状态）——新手最容易用错的 Hook
  • fetch / axios：拉取和提交数据
  • React Query（或 SWR）：异步状态管理，帮你处理加载中 / 缓存 / 错误 / 重试
  • 配置的保存与读取：草稿、发布、版本
  • 组件绑定数据源：让预览的组件展示真实接口返回的数据

学完能做出什么：配置能存能取，组件能连真实 API，离"上线可用"近了一大步。

关键坑：useEffect 的依赖数组和清理函数是重灾区。这一站慢一点，把 effect 的执行时机彻底搞明白，比赶进度重要。

第 4 站：拖拽与画布（原系列 2，约 8～10 天） ​

为什么现在学：前三站到位了，才轮到这个"门面工程"。这是用户眼里最像低代码的部分。

前置：第 1、2、3 站全部。

核心知识点：

  • dnd-kit：现代 React 拖拽方案（别用老掉牙的 react-dnd）
  • 多组件画布：拖组件进画布、选中、层级、缩放
  • 组件树与画布的双向同步
  • 撤销 / 重做：基于 useReducer + 历史栈（第 1 站的状态管理在这派上大用场）

学完能做出什么：拖拽式搭页面，选中组件配属性，实时预览——一个像模像样的低代码编辑器雏形。

关键坑：这一站信息量大，是整条路里最硬的。别一天贪多，拖拽、画布、撤销重做拆开分别攻。

第 5 站：部署与协作（原系列 6，约 5～6 天） ​

为什么现在学：东西做出来了，得让它能上线、能被别人用。

前置：前面四站。

核心知识点：

  • 构建与部署（Vite build、静态托管、CI 基础）
  • 环境变量与配置分离
  • 基础测试（组件测试、关键逻辑单测）
  • 多人协作：配置的导入导出、权限、协作冲突的基本处理

学完能做出什么：你的低代码平台能部署上线，能分享给别人用，具备最基本的工程化素养。

4. 平行补课（按需查漏，不占主线） ​

主线是上面五站，但过程中如果频繁卡壳，八成是下面两块基本功不牢，随时回头补：

JavaScript 本身：异步（Promise / async-await）、闭包、数组高阶方法（map/filter/reduce）、解构、模块系统。React 的坑很多其实是 JS 的坑。

TypeScript：接口/类型别名、泛型基础、联合类型、Partial/Record 等工具类型。低代码到处是"类型驱动"，TS 不熟会很难受。

这两块不用专门排课，遇到不懂的当场查、当场补，比通读一遍教程有用。

5. 推荐节奏与里程碑 ​

跟你现在的习惯一致：工作日 10:00–11:30，每天只做一个小功能，做完记日志。

text
里程碑 1：基础课通关     → 会用 React 做一个配置驱动的页面
里程碑 2：进阶课通关     → 能动态加载任意自定义组件
里程碑 3：第 1～2 站     → 状态有结构 + schema 自动出表单（低代码内核成型）
里程碑 4：第 3 站        → 配置能存后端、组件连真实数据
里程碑 5：第 4～5 站     → 拖拽编辑器 + 能部署上线

到里程碑 3，你就已经真正理解低代码平台是怎么转的了，后面是把它做完整。

6. 一句话路径 ​

基础课 → 进阶课 → 状态管理 → Schema 驱动 → 数据源 → 拖拽画布 → 部署协作。

一条线走到底，别中途跳。看着长，但每一站都是上一站自然长出来的，不会断层。

7. 下一步 ​

这份是总规划（学什么、什么顺序）。如果想把某一站展开成可直接施工的详细课程设计（像进阶课那份 -design.md 一样，拆到每天做什么、写什么代码），点名哪一站，就从哪一站开始生成——建议从**第 1 站「数据流与状态管理」**起，因为它是你做完两门课后最先撞上的墙。