张铁柱-前端实现《低代码可视化编辑器》(一)思路整理 React-dnd+Ts

先上效果：

拖拽生成页面+调整顺序
最近，接到任务做一个低代码编辑器，于是着手整理一下思路，调研一下实现方式。

整理思路：

一、实现框架与语言选择：

秉承着用新不用旧+与国际化接轨的思路，考虑到可用三方框架的数量与质量，于是我选择了React+Ts的实现方式。

二、编辑器实现思路：

1、自下而上的构建思路：

实现拖拽 -> 实现组件位置编排 -> 实现组件属性调整 -> 实现画布与功能面板

2、自上而下的构建思路：

实现画布与功能面板 -> JSON 解析成组件 -> 放置到画布相对位置 -> 实现组件拖拽 -> 实现组件属性调整

三、着手实现：

由于编者首次实现可视化编辑器，不清楚相关的三方组件库的支持情况，选择自下而上的实现方式，先去实现单个组件的拖拽功能，再去实现画布与功能区，以确保核心功能不出现问题。

1、选择拖拽库：

调研：编者分别调研了：react-konva、react-dnd、react-beautiful-dnd、craft.js

react-konva：是一个很棒的画布库，画布中的组件可以实现平移、旋转、缩放，但是不支持三方组件的加入，如果想实现一些功能复杂的组件，后期只能自己实现，并不能使用现成的Antd等组件库。

react-dnd：是很专业的组件拖拽库，很多三方库都是用该组件库来实现拖拽，经过调研，初步认定可实现可视化编辑器的需求，但是该库定位偏功能底层，并不能快速实现功能的堆叠。

react-beautiful-dnd：一个有拖拽功能的组件库，并且在此基础上实现了拖拽排序动画，不同组件列表之间的位置调换。

craft.js：一个成熟的可视化编辑器库，拖拽、缩放、组件属性调整等功能非常完整。

结论：
最终编者选择了react-dnd做为实现可视化编辑器的基础库，原因如下：

react-konva：让我不能接入三方组件库，导致后期的每个组件实现的时间成本大大增加，所以pass。

craft.js：虽然功能完整，但是接入时发现很多涉及到的库并不支持最新版本的react18，秉着向前发展的原则，pass。

react-beautiful-dnd：虽然在拖拽的基础上实现了更多的功能，但也带来了桎梏，导致后期拓展方面的不便，所以pass。

react-dnd：虽然功能偏基础，但是胜在功能稳定、扩展性强，但是弊端可能就是很多功能要自己实现，导致实现周期变长。但是，面对功能稳定、拓展性强的两个优点，我妥协了，并且，react-dnd支持最新版的react18，时代的车轮总是要向前滚的，不能抱着以前东西敝帚自珍，跟随时代与创造时代，是两种不同的乐趣。

下一篇讲解《前端实现低代码可视化编辑器(二)拖拽组件》