低代码平台开发（一）

使用了图司机（通过拖拉拽）制作海报，不由产生了自己开发一种类似得产品。于是开始了模仿图司机进行一套低代码平台开发。本文是第一篇文章，后面还会进行更新，主要是把自己多开发的每一部分进行总结和提升，有想了解的小伙伴欢迎私信。

一、开发框架搭建

使用react18进行开发，利用create-react-app 创建，配合使用antd craco less

1. 创建项目：create-react-app template
   

2. 添加antd craco less: npm i antd @craco/craco craco-less
   

二、分析图司机布局

可以看成上面头部和下方内容区（左侧、中间、右侧）几个模块组成

编写代码时实际也按照这个方式去进行。下图是第一部分完成的内容

三、状态管理

在react中状态管理有多种方案可以选择，例如redux、mobx等，作者在这选择使用context.

四、进入开发

布局在这就不做过多的阐述了，接下来主要针对业务逻辑进行一个说明。中间Center部分用于将左侧设定好的组件进行绘制，那么就需要一个统一的canvas进行管理，而react的函数式组件每次变化都会更新整个组件，则需要对canvas数据提高到APP.js进行管理，再通过context分发给各个组件。需要叙述的东西非常繁多，有兴趣交流的小伙伴欢迎私聊。