杂谈:前端 UI 框架和 UI 组件库的区别

前端技术的概念比较多,容易搞混。

比如有些新人不理解前端 UI 框架和 UI 组件库的区别,今天我来简单说明一下两者的区别。

两者的区别

新人会搞混这两个概念,主要是因为在有些话语中,它们是同等的地位,比如下面这两句话:

"这个网页是用 React 编写的"

"这个网页是用 Ant Design 写的"

这两句话都没毛病,所以有人会问:ReactAnt Design 有什么区别?实际上,懂的人应该清楚,他俩的区别大了去了。

我们可以通过它们的目的和作用来区分它们。

UI 组件库主要是提供开箱即用的组件,让前端开发直接引用这些组件就可以快速搭建页面。

它除了极大地提升开发效率之外,还有统一 UI 的设计风格的目的。

比如:"一看这个网页的界面,就知道这是用 Ant Design 开发出来的"。

UI 框架主要是提供开发规范和设计范式,让前端开发基于这些规范和范式,还有框架提供的基础能力,提升开发效率,同时保证代码的质量。

它也有提升开发效率的作用,但除了这个之外,它还有统一代码的风格的目的。

比如:"一看这个项目的代码,就知道这是用 React 开发的"。

两者的关联

前端 UI 框架和 UI 组件库是有关联的,如果你用 ReactAnt Design 来理解它们的话,很容易会得出一个错误的结论:UI 组件库依赖前端 UI 框架。

实际上,我们可以用前端 UI 框架来实现一个 UI 组件库,但你并不需要必须这样做。

这样讲会有点绕,我画了个图,你一看就懂了:

我们的代码的组成形式是有很多种的,上面这张图可以按照每一个页面的纵向列来看:

  • 页面 A 非常简单,完全用原生 JavaScript 编写就可以了,根本没用前端框架和组件库;
  • 页面 B 使用了组件库 A,这个组件库是用原生 JavaScript 实现的;
  • 页面 C 使用 React 来实现,没有使用任何组件库;
  • 页面 D 使用了 Ant Design 组件库来快速实现,而 Ant Design 是通过 React 实现的;
  • 页面 E 使用了 Ant Design 组件库来快速实现,而 Ant Design 组件库也可以由 Vue 来实现;
  • ...

因此,我们看到:前端 UI 框架和 UI 组件库是有一定关联的,UI 组件库在 UI 框架的上层;但它们并不是强相关的,可以互相独立存在;同一个设计规范的组件库也可以由不同的 UI 框架来实现

现在,你可以说出前端 UI 框架和 UI 组件库的区别了吗?

相关推荐
伍哥的传说1 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4531 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
苹果醋31 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA1 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
Trust yourself2432 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
前端工作日常2 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Feather_743 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro
\光辉岁月/4 小时前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩4 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking5 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron