這幾天做需求，一堆 UI 庫實在是不知道選哪個，各種角色的同事爭論不休；還總有新輪子冒出來，所以我來插一腳，并借此來領(lǐng)悟?qū)懘a的哲學(xué)：
The best way to write secure and reliable Applications. Write nothing; deploy nowhere.
簡介
Vanilla Design 是一個超輕量、超高性能的 React 組件庫。Vanilla Design 團隊 以體積和性能為抓手，并將 nocode 作為指導(dǎo)思想和方法論給 Vanilla Design 組件庫賦能，大大提升了 Vanilla Design 的安全性和可維護性。
安裝
你只需執(zhí)行如下指令，便可在你的 React 應(yīng)用中使用 Vanilla Design：
npm install vanilla-design
快速上手
Vanilla Design 致力于為開發(fā)者提供優(yōu)越的開發(fā)體驗。你可以以極小的成本接入 Vanilla Design。
使用 Vanilla Design
首先，我們需要在應(yīng)用的最外層引入 Vanilla Design 的樣式：
import "vanilla-design/styles.css";
接下來，我們便可以愉快地使用 Vanilla Design 提供的所有組件了：
import { div } from "vanilla-design";
import "vanilla-design/styles.css";
function App(){
return <div>Awesome Vanilla Design!</div>
}
什么？你覺得這不夠 React？沒關(guān)系，我們已經(jīng)充分考慮到了開發(fā)者的習慣。Vanilla Design 提供了另一種引入組件的方式：
import { Div } from "vanilla-design";
import "vanilla-design/styles.css";
function App(){
return <Div>Awesome Vanilla Design!</Div>
}
wow，這很 React。
按需加載
作為一個高性能的組件庫，按需加載是必不可少的。不同于其他 UI 庫，Vanilla Design 已經(jīng)把按需加載做到極致：
css 按需加載
如果你的領(lǐng)導(dǎo)不檢查代碼量，你可以完全省略引入樣式:
import { Div } from "vanilla-design";
// import "vanilla-design/styles.css"; 直接注釋掉這一行即可
function App(){
return <Div>Awesome Vanilla Design!</Div>
}
組件按需加載
同樣地，如果你以小寫方式使用 Vanilla Design，你甚至不需要做任何引入，你的代碼可以被簡化為：
// import { Div } from "vanilla-design"; 直接注釋掉這一行即可
// import "vanilla-design/styles.css"; 直接注釋掉這一行即可
function App(){
return <div>Awesome Vanilla Design!</div>
}
這是不是很酷呢？
誰在使用？
盡管大多數(shù)公司都沒有聲明，但它們都使用了 Vanilla Design，或基于 Vanilla Design 定制化組件庫：
Facebook google YouTube Yahoo Wikipedia windows Twitter Amazon LinkedIn MSN
eBay Microsoft Apple Pinterest PayPal Reddit .NETflix Stack Overflow ...
這些公司通常會將 Vanilla Design 和 Vanilla JS 一起使用，從而大大提升開發(fā)效率。
何時使用？
很多場景下，使用 Vanilla Design 都是一種極佳的選擇：
- 你的老板非要讓你使用 UI 庫，并且在不同的 UI 庫之間挑三揀四、指點江山時；
- 你的老板菜的一批，只會檢查代碼量時；
- 你的同事和你爭論誰是最好的 UI 庫，并且說其他庫是垃圾時；
- 你看到有人又在造組件庫的輪子時；
- ……
作者：貓頭貓
鏈接：
https://juejin.cn/post/7296061322530586650
