🔧 阿川の電商水電行
🍭🍭🍭升級 AntD 6：做第一個吃螃蟹的人
AntD 6 發佈之後，網上很多人都在觀望：
“要不要升級？”
“會不會炸？”
“我的專案能不能扛得住？”
其實 AntD 官方已經在文件裡把升級路徑寫得非常清楚，只是稍顯簡略。
下面我用更真實、更工程化的方式，把 v5 → v6 的升級步驟 做了一次加強版講解，
讓你升級時不至於踩坑。
① 第一步：升級到 v5 最新版本（必須執行）
在升級到 AntD 6 之前，官方強烈建議你先把專案從 v5 升到 v5 最新版本：5.29.1。
為什麼？
✔ v5 的最新版本會給出所有廢棄 API 的 warning
✔ 不處理這些 warning，到 v6 會直接報錯
✔ v5 → v6 是平滑升級路徑，只要你處理掉 v5 的 warning，升級 v6 就不會炸
執行命令：
npm install antd@5裝完以後，啟動專案，務必一條一條看控制台 warning。
比如：
- 某個 API 將被移除
- 某個 props 已廢棄
- 某個組件 v6 即將刪除
所有 warning 都處理完，再繼續下一步。
這階段非常關鍵，等於是在做“升級前全身檢查”。
其實你只要用了5的版本基本沒啥大問題
② 第二步：確保專案運行在 React 18（或以上）
AntD 6 不再支持 React 17 及以下版本。
AntD 官方的態度非常明確：
“React 17，我們不救了。”
好消息是：絕大多數前端專案早就 React 18 了。
如果你還停留在 React 17，那建議你別升級 AntD，
你升級 React 本身都要做好打仗的準備。
檢查你的 package.json：
"react": "^18.x.x",
"react-dom": "^18.x.x"如果不是，那你真的得升級個 der（官方術語：趕緊升 😅）。
React 17 升到 React 18 已經是必經之路，
Suspense、Concurrent、SSR 都已經進入新階段，不升會拖累整個專案生態。
③ 第三步：開幹！升級到 AntD 6
前面兩步做完，你的專案基本已經“具備上 6 條件”了。
現在就可以正式開刀：
npm install --save antd@6或者你愛用的包管理器：
yarn add antd@6
# or
pnpm add antd@6
# or
npm install antd@latest安裝完成後，你的專案就是 AntD 6 正式用戶。
④ 第四步：啟動專案，處理殘留 warning
升級完成以後，重啟專案。
你可能會看到一些：
- 類型定義變動 warning
- 某些行為變更 warning
- 某些組件結構調整提示
- mask blur 帶來的視覺差異
- 你自己寫的樣式被 DOM 改動影響
這些屬於正常“升級後適配”。
根據提示處理即可。
建議你重點檢查以下區域：
✔ 自訂覆蓋類名（AntD 6 DOM 有變化）
✔ Modal、Drawer 的 mask 是否出現模糊效果
✔ Table、Form 是否有類型衝突
✔ 已廢棄 API 是否仍然使用
✔ 第三方依賴是否引用了 AntD 內部 class
通常處理 1-2 小時就可以全部解決 （ 不解決也行，能跑就行😉）。
⑤ 最終：你就正式吃上了 AntD 6 的“螃蟹”
完成以上步驟後，你就完成了整個升級鏈路：
- 清理 v5 廢棄 API
- 升到 React 18（如果你的專案還沒）
- 升到 AntD 6
- 修復升級後剩餘 warning
從此以後：
- 你可以用 Masonry 瀑布流
- 你可以用更快的 Tooltip
- 你可以享受 ZeroRuntime
- 你可以用語義化 DOM 更好寫主題
- 你的專案正式進入 2025 年的前端棧
一句話：
你是第一個吃螃蟹的人，但這次螃蟹真的不難吃，而且還挺香，哥們已經升級，滿嘴流油了。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
