这两年低代码平台的话题愈来愈火，一眼望去全是关于低代码开发的概念，鲜有关于低代码平台的设计实现。本文将以实际的代码入手，逐步介绍如何打造一款低开的平台。
低开概念我们不再赘述，但对于低开的前端来说，至少要有以下3个要素：
- 使用能被更多用户（甚至不是开发人员）容易接受的DSL（领域特定语言），用以描述页面结构以及相关UI上下文。
- 内部具有渲染引擎，用以渲染DSL JSON到实际页面元素。
- 提供设计器（Designer）支持以拖拉拽方式来快速处理DSL，方便用户快速完成页面设计。
本文我们首先着眼于如何进行渲染，后面的文章我们再详细介绍设计器的实现思路。
DSL
对于页面UI来说，我们总是可以将界面通过树状结构进行描述：
1. 页面 1-1. 标题 1-1-1. 文字 1-2. 内容面板 1-2-1. 一个输入框 如果采用xml来描述，可以是如下的形式：
<page> <title>标题文字</title> <content> <input></input> </content> </page> 当然，xml作为DSL有以下的两个问题：
- 内容存在较大的信息冗余（page标签、title标签，都有重复的字符）。
- 前端需要引入单独处理xml的库。
自然，我们很容易想到另一个数据描述方案：JSON。使用JSON来描述上述的页面，我们可以如下设计：
{ "type": "page", "children": [ { "type": "title", "value": "标题文字" }, { "type": "content", "children": [ { "type": "input" } ] } ] } 初看JSON可能觉得内容比起xml更多，但是在前端我们拥有原生处理JSON的能力，这一点就很体现优势。
回顾一下JSON的方案，我们首先定义一个基本的数据结构：元素节点（ElementNode），它至少有如下的内容：
- type属性：表明当前节点所属的类型。
- children属性：一个数组，存放所有的子节点。
- 额外属性：额外剩余的属性，可以应用到当前type，产生作用。
例如，对于一个页面（page），该页面有一个属性配置背景色（backgroundColor），该页面中有一个按钮（button），并且该按钮有一个属性配置按钮的尺寸（size），此外还有一个输入框（input）。
{ "type": "page", "backgroundColor": "pink", // page的 backgroundColor 配置 "children": [ { "type": "button", "size": "blue" // button的size配置 }, { "type": "input" } ] } 在我们的平台中，我们定义如下的结构：
export interface ElementNode { /** * Element 唯一类型type */ type: string; /** * 组件的各种属性： * 扩展的、UI的 */ [props: string]: string | number | any /** * Element 的所有子元素 */ children?: ElementNode[] } 构建与渲染
上文定义了我们低开平台的DSL，但是数据如果没有渲染在界面上，是没有任何意义的。我们必须要有渲染引擎支持将JSON转换为web页面的内容。
类型渲染器（TypeRenderer）
首先我们需要定义基本的渲染器：TypeRenderer。其作用是和ElementNode.type相绑定，一个type对应一个renderer。
import {ReactNode} from "react"; import {ElementNode} from "./ElementNode"; /** * 渲染器渲染上下文，至少包含ElementNode的相关数据 */ export interface TypeRendererContext { elementNode: Omit<ElementNode, ''>; } /** * 绑定Type的渲染器 */ export interface TypeRenderer { /** * 根据ElementNode上下文信息，得到JXS.Element，供React渲染 * @param rendererContext 渲染器接受的数据上下文 * @param childrenReactNode 已经完成渲染的子节点的ReactNode */ render( rendererContext: TypeRendererContext, childrenReactNode?: ReactNode[], ): JSX.Element; } /** * TypeRenderer构造函数类型 */ export type TypeRendererConstructor = new (args: any) => TypeRenderer; 这里的TypeRenderer只是接口抽象，具体的实现，是需要根据type来创建对应的renderer实例。
这里我们先简单实现page、button和input：
// type = 'page'的renderer，使用div作为实际组件 export class PageRenderer implements TypeRenderer { render(rendererContext: TypeRendererContext, childrenReactNode?: ReactNode[]): JSX.Element { const style: CSSProperties = { width: '100%', height: '100%', padding: '10px' } // 对于type = 'page'，就是用一个div进行渲染 // 注意，对于容器类组件，始终需要将传入的子元素放到对应的位置，控制子元素的展示 return ( <div style={style}> {childrenReactNode} </div> ) } } // type = 'button'的renderer，使用antd的Button作为实际组件 export class ButtonRenderer implements TypeRenderer { render(rendererContext: TypeRendererContext, childrenReactNode?: ReactNode[]): JSX.Element { const {elementNode = {}} = rendererContext; const {text = 'button'} = elementNode; return ( <Button type='primary'> {text} </Button> ) } } // type = 'input'的renderer，使用antd的Input作为实际组件 export class InputRenderer implements TypeRenderer { render(rendererContext: TypeRendererContext, childrenReactNode?: ReactNode[]): JSX.Element { return ( <Input/> ) } } 实际上，每个renderer具体返回的组件，都可以任意根据要求进行定制开发，后续我们会深入介绍这一块的内容。但需要再次强调，正如上面PageRenderer中的注释一样，对于容器类组件，需要将childrenReactNode放到对应的节点位置，才能正常渲染所有的子元素。
实现了renderer以后，为了方便管理，我们使用一个所谓的TypeRendererManager（渲染器管理器）来管理我们定义的所有的TypeRenderer：
import {TypeRenderer, TypeRendererConstructor} from "./TypeRenderer"; import {PageRenderer} from "./impl/PageRenderer"; import {ButtonRenderer} from "./impl/ButtonRenderer"; import {InputRenderer} from "./impl/InputRenderer"; /** * TypeRenderer管理器 */ class TypeRendererManager { /** * 单实例 * @private */ private static instance: TypeRendererManager; /** * 内存单例获取 */ static getInstance(): TypeRendererManager { if (!TypeRendererManager.instance) { TypeRendererManager.instance = new TypeRendererManager(); } return TypeRendererManager.instance; } /** * 单例，构造函数private控制 * @private */ private constructor() { } /** * 这里记录了目前所有的TypeRenderer映射， * 后续可以优化为程序进行扫描实现，不过是后话了 * @private */ private typeRendererConstructors: Record<string, TypeRendererConstructor> = { page: PageRenderer, button: ButtonRenderer, input: InputRenderer }; /** * 根据元素类型得到对应渲染器 * @param elementType */ getTypeRenderer(elementType: string): TypeRenderer { if (!this.typeRendererConstructors.hasOwnProperty(elementType)) { throw new Error('找不到处理') } // 采用ES6的Reflect反射来处理对象创建，供后续扩展优化 return Reflect.construct(this.typeRendererConstructors[elementType], []) } } export { TypeRendererManager } 渲染引擎（RenderEngine）
接下来是实现我们的渲染引擎（RenderEngine，叫引擎高大上）。
import {ElementNode} from "./ElementNode"; import {TypeRendererManager} from "./TypeRendererManager"; /** * 渲染引擎 */ export class RenderEngine { /** * 构建：通过传入ElementNode信息，得到该节点对应供React渲染的ReactNode * @param rootEleNode */ build(rootEleNode: ElementNode): JSX.Element | undefined { return this.innerBuild(rootEleNode); } /** * 构建：通过传入ElementNode信息，得到该节点对应供React渲染的ReactNode * @param rootEleNode */ private innerBuild(rootEleNode: ElementNode): JSX.Element | undefined { if (!rootEleNode) { return undefined; } const {type, children} = rootEleNode; // 通过 typeRendererManager 来统一查找对应ElementType的Renderer const typeRenderer = TypeRendererManager.getInstance().getTypeRenderer(type); if (!typeRenderer) { console.warn(`找不到type="${type}"的renderer`) return undefined; } // 递归调用自身，获取子元素处理后的ReactNode const childrenReactNode = (children || []).map((childEleNode) => { return this.innerBuild(childEleNode) }); const reactNode = typeRenderer.render( {elementNode: rootEleNode}, childrenReactNode ) return reactNode; } } 目前的代码并不复杂，流程如下：
需要注意，这个Engine的公共API是build，由外部调用，仅需要传入根节点ElementNode即可得到整个节点数的UI组件树。但是为了后续我们优化内部的API结构，我们内部使用innerBuild作为内部处理的实际方法。
效果展示
建立一个样例项目，编写一个简单的样例：
const renderEngine = new RenderEngine(); export function SimpleExample() { const [elementNodeJson, setElementNodeJson] = useState(JSON.stringify({ "type": "page", "backgroundColor": "pink", // page的 backgroundColor 配置 "children": [ { "type": "button", "size": "blue" // button的size配置 }, { "type": "input" } ] }, null, 2)) const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => { const value = e.target.value; setElementNodeJson(value); } let reactNode; try { const eleNode = JSON.parse(elementNodeJson); reactNode = renderEngine.build(eleNode); } catch (e) { // 序列化出异常，返回JSON格式出错 reactNode = <div>JSON格式出错</div> } return ( <div style={{width: '100%', height: '100%', padding: '10px'}}> <div style={{width: '100%', height: 'calc(50%)'}}> <Input.TextArea autoSize={{ minRows: 2, maxRows: 10 }} value={elementNodeJson} onChange={onChange}/> </div> <div style={{width: '100%', height: 'calc(50%)', border: '1px solid gray'}}> {reactNode} </div> </div> ); }
设计优化
路径设计
目前为止，我们已经设计了一个简单的渲染引擎。但是还有两个需要解决的问题：
- 循环创建的ReactNode数组没有添加key，会导致渲染性能问题。
- 渲染的过程中，无法定位当前ElementNode的所在位置。
我们先讨论问题2。对于该问题具体是指：TypeRenderer.render方法接受的入参可以知道当前ElementNode节点自身的信息，但是却无法知道ElementNode所在的位置具体处于整体ElementNode的哪个位置。
{ "type": "page", "children": [ { "type": "panel", "children": [ { "type": "input" }, { "type": "button", } ] }, { "type": "input" } ] } 对于上述的每一个type，都应当有其标志其唯一的一个key。可以知道，每一个元素的路径是唯一的：
- page：/page
- panel：/page/panel@0
- 第一个input：/page/panel@0/input@0。page下面有个panel（面板）元素，位于page的子节点第0号位置（基于0作为起始）。panel下面有个input元素，位于panel的子节点第0号位置。
- button：/page/panel@0/button@1
- 第二个input：/page/input@1
也就是说，路径由'/'拼接，每一级路径由'@'分割type和index，type表明该节点类型，index表明该节点处于上一级节点（也就是父级节点）的children数组的位置（基于0起始）。
那么，如何生成这样一个路径信息呢？逐级遍历ElementNode即可。其实遍历的这个动作，我们已经在之前渲染引擎的innerBuild地方进行过了（递归），现在只需要进行简单的修改方法：
// RenderEngine.ts代码 - private innerBuild(rootEleNode: ElementNode): JSX.Element | undefined { + private innerBuild(rootEleNode: ElementNode, path: string): JSX.Element | undefined { if (!rootEleNode) { return undefined; } // ... ... // 递归调用自身，获取子元素处理后的ReactNode const childrenReactNode = - (children || []).map((childEleNode) => { - return this.innerBuild(childEleNode) + (children || []).map((childEleNode, index) => { + // 子元素路径： + // 父级路径（也就是当前path）+ '/' + 子元素类型 + 子元素所在索引 + const childPath = `${path}/${childEleNode.type}@${index}`; + return this.innerBuild(childEleNode, childPath) }); const reactNode = typeRenderer.render( {elementNode: rootEleNode}, // ... ... 首先，我们修改了innerBuild方法入参，增加了参数path，用以表示当前节点所在的路径；其次，在生成子元素ReactNode的地方，将path作为基准，根据上述规则"${elementType}@${index}"，来生成子元素节点的路径，并传入到的递归调用的innerBuild中。
当然，build内部调用innerBuild的时候，需要构造一个起始节点的path，传入innerBuild。
// RenderEngine.ts代码 build(rootEleNode: ElementNode): JSX.Element | undefined { - return this.innerBuild(rootEleNode); + // 起始节点，需要构造一个起始path传入innerBuild + // 注意，根节点由于不属于某一个父级的子元素，所以不存在'@${index}' + return this.innerBuild(rootEleNode, '/' + rootEleNode.type); } 另外，为了让每一个renderer能够获取到需要渲染的ElementNode的路径信息这个上下文，我们在TypeRendererContext中添加path属性：
export interface TypeRendererContext { + /** + * path：让每个TypeRenderer知道当前渲染的元素所在的路径 + */ + path: string; elementNode: Omit<ElementNode, ''>; } 同时，innerBuild中也要进行一定的修改，需要在调用TypeRender.render方法的时候把path传入：
// innerBuild函数 // ... const reactNode = typeRenderer.render( - {elementNode: rootEleNode}, + {path: path, elementNode: rootEleNode}, childrenReactNode ) // ... 这样一来，每个renderer的render方法里面，都可以从RenderContext中获取到当前实际渲染的ElementNode唯一具体路径path。在后续的优化中，我们就可以利用该path做一些事情了。
现在，如何处理问题1：key值未填写的问题呢？其实，当我们解决了问题2以后，我们现在知道path是唯一的，那么我们可以将path作为每个元素的key，例如：
Button渲染器：
export class ButtonRenderer implements TypeRenderer { render(rendererContext: TypeRendererContext, childrenReactNode?: ReactNode[]): JSX.Element { - const {elementNode = {}} = rendererContext; + const {path, elementNode = {}} = rendererContext; const {text = 'button'} = elementNode; return ( <Button + key={path} type='primary'> {text} </Button>) } } Input渲染器：
export class InputRenderer implements TypeRenderer{ render(rendererContext: TypeRendererContext, childrenReactNode?: ReactNode[]): JSX.Element { + const {path} = rendererContext; return ( - <Input /> + <Input key={path}/> ) } } 我们只需要将所有的组件使用path作为key即可。
关于构建与渲染的总结
目前为止，我们设计了一套十分精简的渲染引擎，以一套基于antd组件的组件渲染器，通过接受JSON，渲染出对应结构的页面。该渲染器需要考虑，渲染时候元素的上下文，所以在遍历元素节点的时候，需要把相关的上下文进行封装并交给对应的渲染用于自行处理。当然，渲染部分还有很多很多的处理以及各种基本UI元素的创建还有很多的方法（譬如CDN挂载基础类型等），但是基于本系列，我们由浅入深逐步建立整个低代码平台。下篇文章，笔者将开始介绍设计器Designer的实现。
附录
本章内容对应代码已经推送到github上
w4ngzhen/light-lc (github.com)
main分支与最新文章同步，chapterXX对应本系列的第几章，本文在分支chapter01上体现。
且按照文章里各段介绍顺序完成了提交：
modify: use 'path' as key for component. 0535765 modify: add path info for innerBuild. 9d1007b add: SimpleExample. 7658f83 add: root index.ts for exporting all types and instance. 74f9089 add: RenderEngine for build UI component. 3bc90cb add: TypeRendererManager for managing all TypeRenderer instance. 42083f4 add: TypeRenderer and implements. be4d31f add: ElementNode 映射schema节点. d62f830 init config for project 
![洛谷 P11345 [KTSC 2023 R2] 基地简化 题解](http://www.itfaba.com/wp-content/themes/kemi/timthumb.php?src=http://www.itfaba.com/wp-content/themes/kemi/img/random/2.jpg&w=218&h=124&zc=1)
