Ui库对组件化开发的意义

1 分钟读完

如果你刚刚接触react这种组件化开发框架，你可能还没用过UI库，你知道为什么要用UI库吗？

一个正常的web应用，仅仅依赖原生的DOM元素(<input>,<select>,<textarea>…)往往是不够的，它们有这些缺点：

如果你想要在你的react应用中使用一些有趣的组件，比如导航栏，弹窗，进度条，tab栏，你有两种选择：

一是自己写，

二是用现成的组件库，它们可随处复用，样式精美，风格统一，动效自然。

你选哪个？

UI设计发展到现阶段已经形成了完备的一套理论体系。

比如谷歌的Material Design，阿里巴巴的ant design…

它们是啥？

讲得🐂🍺一点，它们是一套UI设计的「风格指南」，讲述了布局，颜色，字体，图标等等一整套UI相关的设计原则。

讲得实用一点，它们是一套「组件库」。它们不会让你自己去根据「风格指南」去设计和开发，而是给你提供各种你可能用的到的通用组件，你所要做的只是在你的应用中使用这些组件，然后你就能得到一个还算不错的结果。

使用任何库/工具，都会在起步阶段带来一定的复杂度，因为你需要熟悉，了解更好的使用它。

熟悉了之后，你的效率才会提升。

每个UI库都提供了符合自己风格指南的组件，UI设计者可以轻松的使用它们，但是有些东西确实UI设计者需要额外考虑的。

比如布局，字体大小，颜色选择等等，这些都由不得设计者随心所欲了，而需要参考UI库的「风格指南」，这样你才能：

开发者只需要熟悉一下各个组件的使用方法，随用随查即可。

但是，

也许你的应用的设计不甘于使用使用默认的样式，而想要有「个性化的颜色搭配」，或者想要「改变默认组件的样式」，甚至想要「实现一些组件不能提供的样式」。

开发者应该怎么办？

其实这些需求我们可以分成三类：

前两类需求，UI库往往会给我们提供解决方案。

它们会提供接口让你改变全局的一些样式（比如主色，辅助色，字体等等），还会提供一些接口让你重写组件的一些样式。

而当你需要额外的样式的时候，就需要写CSS/类CSS了，你可以使用像styled-components这种帮助你在react应用中轻松写CSS的组件库。

如果你想详细了解一套完整的样式解决方案，可以关注我的另一篇博客如何在react中轻松合理地写样式

深入useeffect