React 搭建低代码平台

[jtwang7]

React 搭建低代码平台

参考文章：

• 手撸低代码平台搭建（一）走进前端低代码
• 手撸低代码平台搭建（二）揭秘页面设计器
• 手撸低代码平台搭建（三）组件间交互的实现
• 手撸低代码平台搭建（四）组件拖动自由布局的实现
• 手撸低代码平台搭建（五）自定义组件的实现

目录

• [核心概念](##🌈 低代码核心 - json 元数据 + React 数据驱动)
• [平台架构](##🌈 低代码开发平台架构)
  • 页面设计器
  • 组件列表
  • 拖动
  • 嵌套组件
  • 属性配置区域

---

低代码 (Low-Code Development, LCD):

开发者主要通过图形化用户界面和配置来创建应用软件，而不是像传统模式那样主要依靠手写代码。低代码开发模式的开发者，通常不需要具备非常专业的编码技能，或者不需要某一专门领域的编码技能，而是可以通过平台的功能和约束来实现专业代码的产出。

🌈 低代码核心 - json 元数据 + React 数据驱动

低代码平台的关键：

• 复用组件
• 实现和维护编辑区域与展示区域的组件展示

而实现这一切的核心就在于：json 元数据 + React 数据驱动

在 React 中，数据驱动视图更新是其最推崇的开发哲学，我们关注点着眼于数据的更新，而不是像传统 HTML 界面搭建时如此注重真实 dom 元素。

React Virtual DOM (现为 React Fiber) 的本质就是一个描述元素信息的 json 对象，因此我们可以将真实 dom 抽象成各种带有不同描述信息的 json 对象保存，同样也可以将这些 json 对象通过 render 方法构建成真实 dom 进行展示。

❇️ 低代码核心其实就和 React 的核心渲染逻辑类似：通过组件 json 元数据拼装成一个页面的描述信息，然后通过渲染器组件将描述信息转化页面dom元素。若需要改变组件的展示形式，则只需要修改两者共同维护的那个 json 对象，就可以同步更新不同区域内同种复用组件的展示样式。

核心理念：数据驱动视图

实现方式：抽象 json 描述对象

🌈 低代码开发平台架构

低代码开发平台是通过拖拉拽可视化的页面设计器进行页面开发的。因此，我们重点关注页面设计器是如何实现的。

页面设计器

大多数的页面设计器都包含了如下所示的几个区域：

• 操作栏: 页面的保存、预览、查看json信息、查看代码等操作；
• 组件列表：包含可复用的组件模板。当然也可以添加一些切换，让我们的左侧区域支持查看页面树信息、配置数据源等其他操作；
• 画布：展示区域。可以将左侧的组件拖动到画布中，当然也支持画布中组件的赋值、删除等操作；
• 属性配置：罗列当前选中组件可支持动态配置的属性，修改了属性后可以在画布中看到对应组件的样式变化。

组件列表

组件列表中的每个组件，我们都需要使用一段 json 元数据 来进行描述。

元数据中描述了当前组件的名称，在列表中显示的图标及描述，和组件可进行配置的一些动态属性。我们以输入框组件为例，它的元数据大致可以定义为如下的样子：

{
	code: "MyInput",
	name: "输入框",
	desc: "输入框的描述",
	icon: "input",
	props: {
		name: "字段名称",
		label: "label名称",
		labelCol: "",
		wrapperCol: "",
		required: false,
	}
}

我们通过遍历元数据对象组成的数组来渲染组件列表。

拖动

组件列表的组件我们通过拖动的方式将它移动到画布中。

拖动又分为顺序排列布局拖动及自由布局拖动。

• 顺序排列布局拖动：拖动到画布中的组件是自上而下顺序排列的，可以通过拖动调整上下顺序，当然我们也可以增加分栏这样的布局类型组件，实现组件的左右排列；

  采用顺序排列布局，用户拖动设计出的页面差异性不会太大，页面布局上又相对规整。

• 自由布局拖动：拖动到画布中的组件位置是自由的，我们松开鼠标的位置，就是这个组件在画布中的位置。

低代码拖动实现组件从组件列表移动到画布的关键在于维护一个 json 元数据列表:

组件列表和画布分别定义了两个数组list1和list2，并利用该数组进行遍历渲染。组件拖动到画布中的实现方式则是将某个组件的 json 描述对象复制到 list2 数组中。

原生 dom 支持 dragstart dragend 等事件监听实现拖动。当然我们也可以利用 react-draggable 第三方库实现拖动，<Draggable>可以添加onStart、onStop及onDrag等事件回调函数，我们可以在这些事件中添加一些我们需要的逻辑。例如，我们可以给添加到list2数组列表中的对象动态添加一个唯一值id，用于我们区分同一个页面拖入两个相同组件的情况。

嵌套组件

我们利用 children 来实现组件的嵌套。list2就是最终页面渲染的组件列表，它是一个对象数组的数据结构，为了让它支持嵌套组件，我们需要在组件的元数据对象上增加一个属性，这个属性用来描述该组件下又嵌套了哪些组件，我们就命名这个属性为children。那么，包含嵌套组件的页面数据大致就是下面所示的样子：

[{
	code: "MyCard",
	name: "卡片",
	props: {
		...卡片组件相关配置属性
	},
	children: [{
		code: "MyContainer",
		name: "容器",
		props: {
			...容器组件相关配置属性
		},
		children: [{
			....
		}]
	}]
}]

属性配置区域

• 对画布中的组件添加点击事件，当点击某个组件时，我们能够获取到当前点击组件的组件类型，例如输入框、下拉选择等等。
• 针对每一种组件，我们已经提前在元数据中的props属性定义了这个组件能够进行动态控制的参数，我们只需要将这些参数以合适的表单形式展示在右侧的属性配置区域就可以了，例如，按钮组件的props中有一个text属性，用来控制按钮的显示文案，那么我们就在右侧属性控制区域用一个输入框来做为控制这个属性的表单形式。
• 当修改数据时，我们找到list2中该组件所在的元数据对象，然后将该对象中props属性中text属性值修改为输入框中的内容。每个组件都会接受这个组件对应的元数据props参数，然后根据参数值进行渲染。例如按钮组件，现在按钮的文案时，我们可以使用props.text进行显示。

[jtwang7]

低代码平台搭建

• 手把手带你开发一个低代码可视化平台（一）硬核架构教程，全程开源同步开发
• 手把手带你开发一个低代码可视化平台（二）硬核架构教程，全程开源同步开发
• 手把手带你开发一个低代码可视化平台（三）硬核架构教程，全程开源同步开发
• 手把手带你开发一个低代码可视化平台（四）硬核架构教程，全程开源同步开发