杂谈:前端 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 小时前
js代码09
开发语言·javascript·ecmascript
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling5552 小时前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
FogLetter2 小时前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
拾光拾趣录2 小时前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
然我2 小时前
React 开发通关指南:用 HTML 的思维写 JS🚀🚀
前端·react.js·html
木头没有瓜3 小时前
vscode离线安装插件
ide·vue.js·vscode