ant編譯flex

⑴ Ant Design 4.0 的一些雜事兒 - Overflow 篇

Ant Design 4.0 在處理 Overflow 方面的幾個關鍵點和改進如下：

1. 響應式設計需求：

   • Ant Design 提供了 Grid 組件，方便開發者快速配置響應式頁面布局，以適應不同解析度下的展示需求。

2. Select 組件的 maxTagCount 屬性：

   • 在 Ant Design 的 Select 組件中，maxTagCount 屬性用於控制選項標簽的展示數量。當選項過多時，超出部分會被截斷。
   • 實際使用中，配置 maxTagCount 可能較為棘手，因為它會隨組件及其選項的寬度變化，導致空間不足或過度截斷的問題。

3. 自動截斷處理：

   • 為了解決上述問題，Ant Design 嘗試實現自動截斷功能，例如將 maxTagCount 設為 “responsive”。
   • 實現自動截斷需要考慮渲染所有值項並計算其寬度，以此決定展示數量。但這種方法可能導致性能問題。
   • 為提高性能，Ant Design 嘗試在首次渲染時獲取所有值項寬度，以優化復雜度。然而，實際操作中難以預知確切值，因此這種方法也面臨挑戰。

4. 利用 flex 布局的 order 屬性：

   • 為避免頻繁 DOM 元素位置變動，Ant Design 利用 flex 布局的 order 屬性保持結構穩定，從而實現了自動截斷功能的初步版本。

5. 解決臨界值問題：

   • 在截斷過程中，面對臨界值問題，Ant Design 通過記錄不同餘數下 Rest 寬度來計算相鄰余數的折行情況。
   • 為簡化處理並防止閃動，Ant Design 僅需關注最近兩次渲染 Rest 的最大寬度。

6. 集成與未來支持：

   • 此自動截斷功能已集成於 rcoverflow 中，並提供了響應式截斷容器的生成示例。
   • 在 Ant Design 的 4.10.0 版本中，Select 與 TreeSelect 組件的 maxTagCount 將支持 “responsive” 配置，實現自動響應式截斷。

綜上所述，Ant Design 4.0 在處理 Overflow 方面進行了多項改進和優化，特別是在響應式設計和自動截斷處理方面，以提供更好的用戶體驗和性能表現。

⑵ 從零搭建antv數據可視化大屏（輕量級vite-react-ts）

本文將詳細介紹如何使用React語言搭建輕量級的可視化大屏，重點關注使用Antv數據可視化圖表庫。相較於Vue，React因其輕量化特性，在構建復雜圖表應用時顯得尤為高效。Antv庫專為React量身打造，提供了豐富的圖表類型和強大的交互能力，使得快速構建高質量的可視化大屏成為可能。

為了確保開發過程高效流暢，選擇合適的編譯工具至關重要。本文推薦使用Vite作為前端構建工具。Vite相較於傳統的Webpack具有更快的啟動速度和更佳的開發體驗，尤其是在面對大量圖表數據時，其性能優勢更為明顯。

在項目開發過程中，TypeScript作為一種靜態類型系統，能夠顯著提升代碼的可讀性和可維護性。它與JavaScript的兼容性使得TypeScript成為構建大規模JavaScript應用的理想選擇，特別是在團隊協作環境下。

項目創建階段，利用Vite和TypeScript的優勢，首先初始化React項目。通過執行特定命令，快速生成項目結構，相較於Vue項目，React項目的初始化更為簡潔，便於後續圖表的搭建。

接下來，為了實現動態數據可視化，引入Antv/g2圖表庫。安裝相應依賴後，可以基於官方文檔創建基礎圖表組件，如條形圖。在實現過程中，需要對引入的組件進行適當調整以適應實際需求。引入React特有的`useRef`和`useEffect`函數，可以優化圖表的渲染和生命周期管理。

為了增強大屏的美觀性和交互性，CSS樣式設計不可或缺。創建單獨的樣式文件，如`bar.css`，可以與圖表組件分離開來，實現代碼的清晰分類和易於維護。在Bar組件中引入CSS樣式，確保圖表的布局和視覺效果符合設計要求。

條形圖組合大屏的構建採用Flex布局，簡化了布局管理，使大屏的搭建過程更為直觀。通過調整Flex容器的屬性，可以輕松實現組件的靈活排列和響應式布局。

最後，本文總結了使用Vite、React、TypeScript和Antv/g2構建輕量級可視化大屏的方法，並提供了實踐代碼示例。為了方便學習者快速上手，文章末尾提供了獲取完整代碼的鏈接。通過本文的學習，讀者將能夠掌握從零搭建可視化大屏的關鍵技能，並在實際項目中靈活應用。