淺談antd@5運用心得

千峰HTML5大前端面授2022年9月Vue3.0完結(jié)

download：https://www.zxit666.com/5638/

antd v5版本發(fā)布至今已有整整4個月了，在v5版本發(fā)布后我也是第一時間把之前v4項目遷移到了v5，關(guān)于此次晉級還是有很大的變化跟改良的，故在此淺聊一下我的遷移閱歷和倡議，前提是你曾經(jīng)通讀過官方的遷移指南。

嚴重改良

除了 ui 作風變化、更好的支持 Typescript、優(yōu)化底層庫的依賴等，我覺得此次大版本更新帶來最大的變化是 CSS-in-JS 替代本來 less 的技術(shù)計劃變卦。升至v5后 antd 產(chǎn)物不再導出 css 文件，只要一個 reset.css ，況且這個重置款式文件也只是為了讓開發(fā)者不再去依賴其他的諸如 Normalize.css 的第三方庫。

為什么說這是一次嚴重改良？做過 antd 切換主題功用的開發(fā)者應該深有領會，。流程是先提早編譯出來每種形式下的對應 less 文件，然后經(jīng)過包裹 antd 提供的 ConfigProvider ，依據(jù) mode 的變幻動態(tài)傳值修正 prefixCls 的值以動態(tài)修正組件內(nèi)的款式，這樣做有以下幾種弊端：

每加一種主題就要編譯一套less，雖然有很多反復的款式代碼。

使得項目打包后的體積變得越來越臃腫。

維護起來十分費力，由于每改一個 antd 組件的通用款式就要同時去修正每套主題下的 less 文件對應的相同代碼，雖然他們只要 prefixCls 不同。

修正款式要格外注重款式權(quán)重問題，加重了開發(fā)者的心智擔負。

修正主題可能會破費更多的時間和寫更多的代碼，由于開發(fā)者需求去找到修正款式的元素的dom層級，然后在款式文件中為了權(quán)重問題需求寫 full path。

...（我沒閱歷過的其他問題）

而采用 CSS-in-JS 這樣的技術(shù)計劃則會大大改善以上問題的呈現(xiàn)：

首先它是一種將 css 代碼寫成 JavaScript 對象或函數(shù)的辦法，因而能夠經(jīng)過運用變量、函數(shù)等動態(tài)生成款式，便當響應式設計。

并且相比 less 它作用域控制更容易，因而很好的處理了命名抵觸和款式權(quán)重的問題。

在一定水平上他處理了一局部性能優(yōu)化的問題，由于減少了懇求 css 款式文件的 http 懇求。

遷移指南

假如項目中沒有除了黑夜\白晝形式以外的其他主題，并且沒有適配 IE 閱讀器的需求，那么祝賀你，遷移此項目的本錢將是十分輕量級的，直接 yarn add antd 晉級庫版本，移除 v4 項目中援用到的 antd 內(nèi)置的文件（antd/dist/antd.css），之前在 less 文件中經(jīng)過 :global 去修正 antd 組件默許款式的行為同樣會生效，假如之前做了主題切換功用的項目同樣也能夠把之前的主題款式文件刪了，antd 內(nèi)置了白晝（default）、黑夜形式和緊湊形式的算法（algorithm）。這個 algorithm 在表現(xiàn)上來看能夠了解為作風或者主題吧。那假如要修正單個組件的款式，比方antd 按鈕默許高度為32，在某個業(yè)務場景下，這個按鈕需求改成40，那么能夠修正主題中的 token 去完成這一目的而不用去修正款式文件，這個 token 怎樣了解？能夠看成是組成一個組件的每個顆?；目钍?，也就是一些款式變量名而已。

那么，為什么修正 、token 的計劃會比之前修正款式文件的計劃要更優(yōu)

那如何完成更多的自定義主題呢？其實思緒跟v4是一樣的，修正款式變量值，只不過在v5中是經(jīng)過修正js變量，而在以前的版本是修正 less 變量，詳細完成辦法能夠參考 antd v5 版本中 default（對應源碼 components/theme/themes/default(或者dark)），實質(zhì)上是覆寫變量值，只是變量名需求逐個對應起來。

開發(fā)時運用技巧

運用v5版本這么長時間以來，除了在 nextjs 項目中最初版本會有水合問題以外，最大的問題就是你想去修正某個組件的某個部分款式，但是不曉得對應的變量名，我的倡議是 clone 一份 antd 最新版本的源碼，在不曉得變量名（token）的時分去源碼中 components 目錄下找到你要的組件，然后找到其下的 style 目錄，找到對應款式下它援用的 token 屬性名，以 Button 組件的背風光為例：

那么，修正 colorBgContainer 就ok了：

<ConfigProvider

theme={{

token: {

colorPrimary: '#FF9B50', // 主題色

colorBgContainer: '#FF9B50' // 寫在這里跟寫在下面都一樣

},

components: {

Button: { controlHeight: 50, colorBgContainer: '#FF9B50' }

}

}}

>

<Button className={styles.btn} onClick={handleDeposit}>

<span style={{ color: '#fff' }}>

{isConnected ? `Deposit 3 ETH` : 'Unlock WalletConnect'}

</span>

</Button>

</ConfigProvider>

假如你只是針對某個業(yè)務場景下的某個組件修正部分款式，倡議寫在 components 下，假如是某個模塊中通用的款式，則選擇 token，實質(zhì)上都是修正 token，只是劃分區(qū)域更細致化而已。