过境笔记

主题

React 低代码进阶 - 自定义组件动态加载 ​

让你的低代码平台真正可扩展：开发者上传自己的 React 组件，平台动态编译、注册、渲染。 n

0 / 8 完成

为什么需要这个系列 ​

完成基础课程后，你已经做出了一个配置页，但有个核心限制：

只支持预置的 InfoCard 组件。

想加新组件？得改源码、重新部署。

真正的低代码平台应该是：

  • 开发者上传自己写的 React 组件
  • 平台自动编译、注册、渲染
  • 业务方像用内置组件一样用自定义组件

这就是本系列要解决的：从上传到渲染的完整自定义组件链路。

前置要求 ​

必须完成基础课程 Day 1～12。

你需要熟悉：

  • React 组件、props、state、Hook
  • JavaScript 模块系统（import/export）
  • TypeScript 基础类型
  • 浏览器文件上传 API

如果对这些还不熟，先回去把基础课程学完。

最终效果 ​

完成本系列后，你的低代码平台能：

  1. ✅ 上传自定义 React 组件（单文件或文件夹）
  2. ✅ 自动编译 JSX/TSX 代码
  3. ✅ 动态注册组件到组件库
  4. ✅ 根据组件元数据自动生成配置表单
  5. ✅ 支持多文件组件和依赖管理
  6. ✅ 预置常用库（React、lodash、antd）
  7. ✅ 基础沙箱隔离（防止恶意代码）
  8. ✅ 组件版本管理和热更新

学习路线 ​

共 8 天，分三个阶段。

阶段一：单文件组件加载（Day 1～3） ​

先让最简单的场景跑通：上传一个 .tsx 文件，编译它，渲染它。

Day主题
Day 1组件上传与元数据解析
Day 2动态编译 React 组件
Day 3组件注册与实例化

阶段二：完整的组件生态（Day 4～6） ​

支持多文件组件、依赖管理、动态属性面板。

Day主题
Day 4属性面板动态生成（Schema 驱动 UI）
Day 5多文件组件支持（虚拟文件系统）
Day 6依赖管理与外部库

阶段三：生产化能力（Day 7～8） ​

沙箱隔离、版本管理、热更新。

Day主题
Day 7沙箱与安全隔离
Day 8版本管理与热更新

环境要求 ​

  • Node.js 18+
  • 完成基础课程 Day 12 的项目代码
  • VS Code + ESLint + Prettier 插件

技术栈 ​

在基础课程的技术栈上新增：

  • @babel/standalone - 浏览器端编译 JSX/TSX
  • jszip - 解压 zip 文件（Day 5）
  • localforage - 更好的本地存储（可选）

最终项目目录 ​

text
react-lowcode-custom-components/
├─ src/
│  ├─ types/
│  │  ├─ config.ts              # 配置类型（基础课）
│  │  ├─ componentMeta.ts       # 组件元数据类型 [新增]
│  │  └─ componentRegistry.ts   # 组件注册表类型 [新增]
│  ├─ utils/
│  │  ├─ compiler.ts            # Babel 编译器 [新增]
│  │  ├─ sandbox.ts             # 沙箱执行环境 [新增]
│  │  ├─ moduleResolver.ts      # 模块依赖解析 [新增]
│  │  └─ virtualFS.ts           # 虚拟文件系统 [新增]
│  ├─ services/
│  │  ├─ componentRegistry.ts   # 组件注册服务 [新增]
│  │  └─ componentStorage.ts    # 组件存储服务 [新增]
│  ├─ components/
│  │  ├─ ComponentSidebar.tsx   # 扩展支持自定义组件
│  │  ├─ DynamicConfigForm.tsx  # 动态配置表单 [新增]
│  │  └─ ComponentUploader.tsx  # 组件上传器 [新增]
│  └─ ...
└─ ...

每天学习时长 ​

进阶课程比基础课程技术深度更高，建议：

  • 每天用时：90～120 分钟
  • 总周期：1.5～2 周

不要急，慢慢啃，把每个概念都搞明白。

学习建议 ​

  1. 必须完成基础课程，不要跳过
  2. 每天写代码验证，不要只看不练
  3. 遇到报错先自己调试，实在不行再查资料
  4. 理解原理比记 API 重要，知道为什么这样设计
  5. 注意安全问题，本课程的沙箱是教学演示，不足以用于生产

安全警告 ​

⚠️ 重要：本课程实现的动态组件加载和沙箱隔离是教学演示，不能直接用于生产环境。

真实的低代码平台需要：

  • 后端代码审查和静态分析
  • 资源使用限制（CPU、内存、网络）
  • 内容安全策略（CSP）
  • 定期安全审计
  • 完善的权限控制

学习时理解原理即可，不要把教学代码直接用到线上。

开始 ​

准备好了吗？

→ Day 1：组件上传与元数据解析

加油，笨蛋！这个系列有点难度，但学完你就真正理解低代码平台的核心技术了。