1.XRender - 开源之路
2.Ant Design Vue 3.0 的组件那些正经事儿

XRender - 开源之路

       XRender，阿里飞猪孵化的源码t源开源产品，目前在GitHub上获得4.2k star。码分本文旨在分享XRender在过去一年内的组件发展和变革，以及它如何成为更多前端开发者的源码t源朋友。

       一、码分红绿灯指标源码前言

       1. 什么是组件 XRender？XRender 是一套基于React.js框架的轻量、易用、源码t源易上手的码分中后台「表单 / 表格 / 图表」解决方案，已经在阿里飞猪内部服务三年，组件未来将持续为用户提供服务。源码t源

       2. 为什么需要 XRender？对于中后台业务而言，码分表单+表格能覆盖%的组件业务场景，且大部分场景重复度高。源码t源jsp 旧书交易源码开发人员无需浪费时间在切图上，码分XRender这类工具能有效提升开发效率。

       二、XRender 的自我革新

       三年前，FormRender作为表单解决方案在GitHub上开源，成为XRender家族的首成员。面对复杂业务场景，FormRender的旧技术方案面临挑战，内部决定升级FormRender，并增加更多Render方案，以提升内部前端开发者的效率。

       现在的XRender包括FormRender、FRGenetator、小程序抽奖 源码TableRender和ChartRender四个组件，统称为XRender。

       1.「FormRender」：协议驱动的表单解决方案。代码示例展示其核心功能不变，遵循「协议驱动渲染」原则。

       代码重构，面向未来：FormRender 1.x 对内核进行彻底重构，全面拥抱React Hooks和Antd Design 4.x，增加Typescript类型定义，简化编写方式。新增beforeFinish、onFinish钩子，用于表单提交前的酷鱼桌面源码校验和数据提交，以及onMount方法，类似于React的componentDidMount。引入userForm方法，方便操作表单和schema，提供动态修改功能。新增watch变量，用于数据监听，增加组件丰富度，如rate、treeSelect等内置支持，以及通过JSON Schema的format属性自定义组件。

       2.「表单设计器」：中后台表单可视化搭建工具，提供可拖拽、wordpress网站源码分享可搭建能力，并支持导出schema。

       3.「TableRender」：表格解决方案，内置搜索、重置、分页功能，简化开发流程。

       4.「ChartRender」：基于@ant-design/charts的图表解决方案，提供快速生成图表的能力。

       三、适合场景

       XRender广泛应用于阿里飞猪的中后台业务，同时被阿里云、高德、淘宝、蚂蚁等BU的开发者使用。对于面向运营的搭建平台，推荐使用XRender。

       四、未来规划

       1. 内置组件支持自定义：开放List、Array类型的嵌套组件样式定制化，满足不同业务需求。

       2. XRender 2.0开发：计划于年中旬完成，支持移动端渲染引擎Rax和Ant Design Mobile v5。

       五、结尾

       感谢XRender的开发者，特别制作视频以致敬社区。如果你希望在项目中使用XRender，可访问文档站点快速上手。若对源代码感兴趣或有建议，欢迎访问GitHub仓库。如XRender对你有帮助，请在GitHub上给予支持。

Ant Design Vue 3.0 的那些正经事儿

       Ant Design Vue 3.0 的发布并非仓促之举，它标志着一个重要的里程碑，旨在提供更深入的源码重构、增强的功能特性、优化的易用性和性能提升。以下是3.0版本的主要亮点：

       1. **源码重构与提升**：从 TypeScript 和 Composition API 开始，大部分组件已切换至这种架构，以提升类型提示和管理复杂度。虽然Vue 3在TS支持上有所增强，但组件库的泛型组件和属性类型复用仍面临挑战。团队鼓励对TS技术熟练者加入，共同改进。

       2. **功能同步更新**：3.0引入了AntD 4.x的多项功能，如自定义时间库、虚拟滚动、暗黑主题、无障碍辅助和RTL支持，以及CSS Variables。

       3. **易用性优化**：在Table、TreeSelect等组件的自定义渲染API上，3.0简化了配置，引入统一的`v-slot`命名，减少了配置膨胀和未来扩展的风险。

       4. **性能改进**：FormItem的渲染优化、TreeNode的废弃以及Tree和TreeSelect的虚拟滚动功能，旨在提升组件的性能和大数据渲染能力。

       尽管Table暂未支持虚拟滚动，但团队计划推出专门的产品解决大数据问题，预计在接下来的1-2个月推出。

       升级Ant Design Vue 3.0，你可以期待更简洁的代码、更好的性能，以及与社区的持续互动。如果你对这些改变感兴趣，别错过月日的Vue专场会议，详细内容可通过关注公众号获取。