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

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

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

两者的区别

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

“这个网页是用 React 编写的”

“这个网页是用 Ant Design 写的”

这两句话都没毛病，所以有人会问：React 和 Ant Design 有什么区别？实际上，懂的人应该清楚，他俩的区别大了去了。

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

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

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

比如：“一看这个网页的界面，就知道这是用 Ant Design 开发出来的”。

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

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

比如：“一看这个项目的代码，就知道这是用 React 开发的”。

两者的关联

前端 UI 框架和 UI 组件库是有关联的，如果你用 React 和 Ant 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 组件库的区别了吗？

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。