GantD - 专注于数据密集型业务场景|基于AntD聚合型React组件库

简介: 对于业务逻辑足够复杂的企业级管理型软件,有限的空间维护更多的业务信息、查看更多的业务信息一直是企业级终端用户的诉求。GantD是面向B端管理型软件,专注于数据密集型业务场景, 基于Antd聚合型React组件库。在Antd的基础上做了不同程度的针对性的强化,亦可以视作为Antd的补充,可以和Antd同时使用

QQ20200323-154800.png

前言

对于业务逻辑足够复杂的企业级管理型软件,有限的空间维护更多的业务信息、查看更多的业务信息一直是企业级终端用户的诉求。

而AntD所提供的解决方案面向的是受众很广的企业级软件,不是很侧重于对于大数据量数据密集型的业务场景,所以GantD诞生了。

Table和Form是企业级管理型软件最重要的两种组件,GantD对这两种组件做了归纳、业务收敛,客官不妨里面请,来看看GantD中Table和Form的爱恨情仇:

Table 表格

表格对应的数据结构要么是list, 要么是tree,对于数据的维护,有可能是维护一行(一个业务对象)或者维护一个单元格(一个业务对象的属性)。

对于一般表格常规的情况就是默认是只读的,而想要去编辑,交互行为要么是弹窗,要么是跳转,要么是单元格编辑

先讲单元格编辑

在很久以前,企业的一些业务没有对应匹配的管理软件的时候,人们用的是Excel去维护数据。如果你了解这些,你就会了解这些企业对于业务软件中的表格的期望方向,以及对于表格的单元格编辑是多么的依赖。

而这种单元格编辑的习惯从业务场景交互设计的角度看其实也是一种比较好的交互行为,便捷直观,尤其是你在维护海量属性和海量数据的时候,可以少很多步骤。(🤨 同样也带来了不小的难度)

而对于表格中的每一列格子,都有可能代表的是一个小业务,比如 John's address、Lili's tags、Tom's tasks

而对于每种小业务所涉及的组件,散落在地、交互行为不成体系将会引起不小的麻烦,对于每一个单元格其实应该有一种组件去维护这个单元格所代表的的业务,这种组件我们称之为——数据单元DataCell(在下面会讲)

1710a7a7aab4979f (1).gif

对于弹窗形式的编辑,我们一般会用到Form,

对于跳转形式的编辑,一般会跳转到一个详情页,详情页一般情况主体也是From。

编写一个复杂Form表单的呈现以及数据维护逻辑将花费不少的精力和时间,最懊恼的是每个人编写的form表单视图和交互逻辑或许还不统一,其他人很难去阅读一个业务信息零散的、没有语义化描述的Form表单。

这就引出了一个概念,SchemaFrom

SchemaFrom 数据驱动表单

数据驱动表单SchemaFrom是以一段集中的业务描述数据Schema 输入到组件中而直接构建生成的一种表单。

这很好理解,类似这样:

import React,{useState} from 'react'
import { SchemaForm } from 'gantd'
const schema = {
    type: "object",
    title: "普通表单",
    propertyType: {
        name: {
            title: "姓名",
            type: "string",
        },
        age: {
            title: "年龄",
            type: "number",
            componentType: "InputNumber"
        }
    }
}
const [data, setData] = useState({
    name: 'John',
    age: 26
})
function BasicUse() {
    return <SchemaForm schema={schema} data={data}/>
}
ReactDOM.render(<BasicUse/>,mountNode)

QQ20200324-110457.png

这样就可以直接构建出一个数据双向绑定的表单, 是不是很方便?这也有利于中台的建设。

眼尖的同学就会注意到componentType这个特殊的字段,它是什么呢?

componentType 从语义上看就是组件类型,但是它不同于一般的组件,它应该有它的规矩

这也和Table的单元格编辑一样共同引出了一个概念——数据单元

DataCell 数据单元

一个阳光明媚的清晨,Tom面对着电脑屏幕说,这个表格我目前只想看,但不代表我等会不编辑,我等会编辑的时候能不能像Excel一样编辑?

一个慵懒的午后,Lucy说,这个表单我目前只想看,但我待会要编辑,我阅读的时候别显示那么多框框。

城市灯光亮起、下班回家的路上,John突然有了疑问,表单和表格都是做数据的展现和维护,为什么表格和表单不做成都是可以即有读状态又有写状态呢?读写状态能不能分离开呢?

他意识到对于对象的信息,并不是一上来就要去更改,更多的时候应该是先去读这个对象,读写分离还可以保护数据不被误操作。他立刻意识到了这是一种或一系列组件,一种可以同时使用在Table和Form中的组件。

我们是时候需要一种机制让读写分离开了

数据单元是什么?

数据单元是数据展示或维护的最小单元组件,它可以支持只读模式和写模式。

从业务角度看,数据单元独立负责着一块业务或者一个业务属性,负责着业务信息的读和写

而对于一般表单的常规情况就是默认是写状态的,

类似这样(https://github.com/settings/profile):

17106e95722558fe.jpg

而对于像名片或简历展示一样的需求,类似这样(钉钉的名片):
QQ20200324-111608@2x.png

遇到了读的视图我们不可能在业务层再写一套专门读的视图,如Description,那样就太麻烦了。

所以我们需要这种组件即支持读,也支持写。通俗的讲就是把以上两张图的name和昵称合成一个组件。

并且需要同时支持在表单和表格中使用

这种组件就是数据单元的由来。

欢迎

我们的专注点将主要持续在数据密集型业务场景Table和Form这两种组件上,Gantd 大家不妨尝试下,说不定可以解决你的一些问题。

官网:http://gant.design

文档:http://docs.gant.design

GitHub:https://github.com/gantFDT/gant-design

目录
相关文章
|
9天前
|
前端开发 JavaScript UED
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库,涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容,并通过代码案例进行说明。适合初学者和进阶开发者参考。
32 8
|
2月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
122 4
React开发需要了解的10个库
|
3月前
|
前端开发
react使用antd中的Checkbox实现多选
在React项目中,通过Ant Design的Checkbox组件实现多选。引入Checkbox,使用Checkbox.Group来管理Checkbox,设置`value`属性绑定选中项数组,通过`onChange`更新数组。维护一个全选状态,根据选中项数量与总数决定全选按钮状态。全选按钮的`onChange`事件用于控制所有Checkbox的选中状态。
106 1
react使用antd中的Checkbox实现多选
|
3月前
|
前端开发
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
本文介绍了在React项目中如何添加路径别名alias以简化模块引入路径,设置组件props的默认值,以及如何二次封装Ant Design的Modal组件。文章还提供了具体的代码示例,包括配置Webpack的alias、设置defaultProps以及封装Modal组件的步骤和方法。
74 1
React添加路径别名alias、接受props默认值、并二次封装antd中Modal组件与使用
|
2月前
|
资源调度 前端开发 JavaScript
React中classnames库使用
【10月更文挑战第7天】
|
26天前
|
资源调度 前端开发 JavaScript
React 测试库 React Testing Library
【10月更文挑战第22天】本文介绍了 React Testing Library 的基本概念和使用方法,包括安装、基本用法、常见问题及解决方法。通过代码案例详细解释了如何测试 React 组件,帮助开发者提高应用质量和稳定性。
39 0
|
3月前
|
前端开发 JavaScript 区块链
react18函数组件+antd使用指南-使用代码集合以及报错记录汇总
本文介绍了多个React开发中常见的问题及其解决方案,包括但不限于:1)`useForm`实例未连接到任何`Form`元素的警告及解决方法;2)监听页面滚动事件的实现方式;3)React 18与antd 5.8.6中定制主题的方法;4)React结合antd 4.x版本自定义主题色的步骤;5)解决`ResizeObserver loop`相关报错的技巧;6)处理React设计表单时遇到的CDN资源加载失败问题;7)解决onClick事件传参问题;8)修复类型错误等。每部分均提供详细分析与实用代码示例,帮助开发者快速定位并解决问题。
48 2
|
3月前
|
前端开发 数据安全/隐私保护
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)
文章介绍了如何在React项目中使用Ant Design实现一个修改密码的组件,包括原密码、新密码和再次输入新密码的表单项,并为新密码增加了正则表达式复杂度校验。
75 0
react antd 实现修改密码(原密码,新密码,再次输入新密码,新密码增加正则复杂度校验)
|
3月前
|
前端开发 计算机视觉
React使用antd实现可编辑单元格
React结合Ant Design实现可编辑单元格的表格组件,通过EditableRow和EditableCell封装实现单元格编辑功能,并提供saveFun回调保存编辑内容。
115 1
|
3月前
|
前端开发
React按需加载antd步骤以及出现的问题
在使用`babel-plugin-import`插件时,可以在项目的根目录创建`.babelrc`文件或在`package.json`中添加babel配置。这两个文件中不应该存在重复的配置。如果出现"Multiple configuration files found"错误,需要选择其中一个文件进行配置,并删除另一个文件中的babel配置。使用该插件后,可以直接从`antd`引入组件,无需手动引入样式文件。
69 1
下一篇
无影云桌面