低代码大数据可视化页面前端方案

主要技术

1. react 16.x, umi 3.x, css3 grid布局, echarts 5.1,monaco-editor,antd 4.x等

实现思路

1. react component=fn(props), 使用hooks 组件+配置的props 构成页面 组件树, 通过一个对象 保存所有组件的 状态 , 对象的 key 是组件在整个组件树中的唯一key(id) , 对象的 value是组件的props
2. 使用 css-grid 栅格布局 实现页面布局自适应.
3. 使用monaco-editor 编辑低代码, 使用 new Function(sentence) 在组件渲染或事件回调时执行低代码改变组件props
4. 组件初始化时 将默认props 全部返回到 低代码中 方便查看.
5. antd相关组件用于编辑阶段. 不用于生成dom中(不适合可视化展示).
6. 暴露echarts,React到全局变量window中方便低代码使用
7. 使用 React.createElement 插入自定义组件

存在的问题

1. 性能优化 (如果开发的组件过多可能导致页面加载缓慢,可以使用各种方案优化)
2. 在低代码中无法直接使用jsx 语法