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构建轻量级可视化大屏的方法，并提供了实践代码示例。为了方便学习者快速上手，文章末尾提供了获取完整代码的链接。通过本文的学习，读者将能够掌握从零搭建可视化大屏的关键技能，并在实际项目中灵活应用。