React蚂蚁生态-从入门到惊艳

·  阅读 445

您好,我是沧沧凉凉,是一名前端开发者,目前在掘金知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识,欢迎关注。


消失了两个月,这段时间公司新接了一个项目,之前的技术栈是Vue+JavaScript而新项目换成了React+TypeScript,最开始换技术栈的主要原因是为了解决大量数据表格渲染问题(即上万条数据),经过很长时间的探索,目前发现Vue上比较成熟的虚拟列表方案对比React来说是非常少的。

而这一段时间,我进行了很大程度的研究,因为没有那么多的人力物力从头开始搭建后台框架,项目又比较急,前一周才提这个事情,后一周就要写一些东西出来,所以我又去找了大量开源的后台管理系统框架,总共找到有20多种。

经过考虑,最后我选择了由蚂蚁开源的一套后台框架Ant Design Pro,其实我以前是会React的,但是没有做过比较正经的项目,所以很想有一个机会做一个企业级的项目。

在项目开始之前,我考虑到React是单向数据流,没有Vue那种双向绑定功能,也就是v-model,我就比较疑惑如果要写一个表单,那岂不是每次输入后我就需要调用setState或者setxxx这个hook,那岂不是非常麻烦?每一个表单都需要大量的代码进行实现?这样效率岂不是比Vue低太多了。

事实证明我错了,随着对蚂蚁这一套生态的深入了解,让我每天都在惊叹蚂蚁开源这套东西也太好用了吧!

1. Antd

Antd是基于Ant Design设计体系的React UI组件库,主要用于研发企业级中后台产品。

敢说只要是国内使用React做开发,除了大厂之外用React开发几乎都是使用的这个UI组件库进行开发,它除了提供大量好用的组件之外,还提供了可以展示10万条数据的选择框。它也是使用到了虚拟列表功能。

image-20210607231622606

Antd的表格也是一大亮点!它提供了render方法,可以让你自定义每一列表格,通过它就可以拿到当前列对应的值,如果在Element中想要实现这个功能,你就必须使用插槽,过程是非常繁琐的。

2. ProComponents

我最近天天都在吹这东西实在是太好用了,它在Antd之上又封装了一层,比如后台架子。

2.1 ProLayout

image-20210607225457453

ProLayout,这一个组件就能完成侧边导航栏、顶部栏、页脚等的搭建。 那么你可能会问,一个组件管这么多事情,那是不是很难进行定制。

然而让我更加惊讶的就是它的自定义功能,它提供了大量的属性让你可以自定义几乎所有的东西,比如导航栏、顶部栏这些统统都是能够进行替换的。

2.2 ProForm

前文中提到React是单向数据流,创建一个表单是否会非常麻烦,需要大量使用setState?

然而不管是Antd还是ProForm,都将创建表单的重复程度降低了很多个档次,回想一下如果是在Vue中要创建一个表单,那是不是应该在data里面声明一个变量,然后将这个变量通过v-model进行双向绑定。

而在ProForm里甚至都不需要声明变量:

<ProForm
    onFinish={async (values) => {
        await waitTime(2000);
        console.log(values);
        message.success('提交成功');
    }}
>
    <ProFormText name="mangerName" label="商务经理" />
</ProForm>
复制代码

上面是简化后的代码,你只需要写一个name属性,然后啥都不用干,直接点击确定按钮,它会自动进入到onFinish这个属性中,在这个属性中你可以得到一个values,该values就包含了你定义表单的所有值,你只需要将它传递给后端就可以。同时在你点击提交的时候,它会自动给你添加一个提交动画。

save

表单验证也非常的简单!

<ProFormText name="mangerName" label="商务经理" rules={[{required: true}]} />
复制代码

只需要添加上rules,它会自动帮你补全提示信息。

总之ProComponents对Antd组件进行了大量的封装,几乎可以解决你搭建管理系统中百分之80的需求。

3. Umi

Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。Umi以路由为基础的,同时支持配置式路由约定式路由,保证路由的功能完备,并以此进行功能扩展。然后配以生命周期完善的插件体系,覆盖从源码到构建产物的每个生命周期,支持各种功能扩展和业务需求。

React之前声明路由必须要到各个组件中进行声明,非常不方便管理,虽然不知道什么时候发布了React Router Config,让React能够像Vue一样将路由统一配置在一个文件中,方便管理。

Umi解决了React路由的问题,同时它不仅仅解决路由问题,还提供了服务端渲染(SSR)、快速刷新、按需加载、环境变量等等方便功能。

同时在Umi 3.5时发布了一个新功能:mfsu,它可以大大的提升项目的启动和热更新速度,具体可以看下图中的对比。

测试

可以看到开起了mfsu功能后,除了首次启动,第二次启动减少了非常多的时间,我自己亲测第二次启动时间一般在4s左右,这会让你在开发前端应用时具有更高的效率。

但是!mfsu功能目前来讲还存在着非常多的问题,比如文件更新后页面偶尔不进行刷新。

4. Dva

众所周知,React中复杂状态管理一般是使用Redux,但是使用过Vuex的人应该都知道,相比于Redux,Vuex使用起来简直方便太多,于是蚂蚁在Redux和Redux-saga的基础上进行了一次封装,这就是Dva,Dva具有Vuex一样的易用性。同时还可以作为插件插入到Umi项目中,然而在目前的项目中我是没有引入Dva的,因为后台管理系统几乎很少会需要一个多界面共用的状态,即使有,通过Umi自带的简易数据流也可以很轻松的完成这些状态的传递。

5. Ahooks

大神器!其中最为推荐的就是它的useRequest这个核心hook!虽然该hook是受到了其它库的启发,但是蚂蚁团队的目标是将它打造的比其它库更为好用。

useRequest具有防抖、节流、并行请求、依赖请求、手动触发、默认请求等等一大堆的功能!

想想你在Vue中如果要获取一个网络数据那该怎么进行获取?

// 首先在data中声明一个变量 data

axios.get("https://example.com").then(res=>{
    data = res.data.data;
})
复制代码

那么如果你新增了一条数据需要重复进行请求呢?那你就需要将上面的代码封装成为一个方法,用到的时候再进行调用,如果这个时候你还需要防抖或者节流功能呢?你是不是还得再包一层?如果你还需要一个loading变量,用来控制界面是否显示一个loading提示呢?你是不是还得声明一个loading,再在请求之前将loading设为true,然后等待请求完毕后将loading设置为false?

我相信百分之80的人都会这么做,因为我也是这么做的,当然大佬可能会有更加简单的方式实现我上面说的这些。

但是使用了useRequest这些就变得非常简单。

const { data, error, loading, run } = useRequest(getUsername); // getUsername为需要发起的网络请求
复制代码

好了,就是这么简单,只需要将网络请求放在useRequest这个hook中,它会自动给你生成请求成功的值data,请求失败的值error,请求状态loading,重复请求函数run。

还没有完,它在getUsername还可以跟一个对象,里面可以放置各种参数:

const { data, error, loading, run } = useRequest(getUsername, {debounceInterval: 500});
复制代码

debounceInterval就代表开启防抖,是不是非常简单!

当然它的功能还不止这么一点,这里只是做一个抛砖引玉的效果,具体功能你可以参考官方文档,我也会在后面的文章中将我觉得常用的hooks整理出来。

6. 总结

随着对蚂蚁这一系列React的生态了解,以及对于jsx使用起来越发的得心应手,在这里也不说Vue和React孰好孰坏,只能说比起React来讲,Vue更适合才学习完HTML+CSS+JavaScript的朋友上手,并且学习Vue在国内可以得到大量的工作机会,有一大堆小型外包公司都是使用的Vue技术栈,如果你是才转行的人,那么Vue绝对是你的不二选择,至于React,推荐有时间的话一定要进行学习,它会打开一个前端新世界。

分类:
前端
收藏成功!
已添加到「」, 点击更改