1.XRender - 开源之路
XRender - 开源之路
XRender，飞猪飞猪阿里飞猪孵化的源码开源产品，目前在GitHub上获得4.2k star。代码本文旨在分享XRender在过去一年内的飞猪飞猪发展和变革，以及它如何成为更多前端开发者的源码朋友。
一、代码thinksns 客户端源码前言
1. 什么是飞猪飞猪 XRender？XRender 是一套基于React.js框架的轻量、易用、源码易上手的代码中后台「表单 / 表格 / 图表」解决方案，已经在阿里飞猪内部服务三年，飞猪飞猪未来将持续为用户提供服务。源码
2. 为什么需要 XRender？对于中后台业务而言，代码表单+表格能覆盖%的飞猪飞猪业务场景，且大部分场景重复度高。源码开发人员无需浪费时间在切图上，代码XRender这类工具能有效提升开发效率。
二、XRender 的自我革新
三年前，FormRender作为表单解决方案在GitHub上开源，图片标注网站源码成为XRender家族的首成员。面对复杂业务场景，FormRender的旧技术方案面临挑战，内部决定升级FormRender，并增加更多Render方案，以提升内部前端开发者的效率。
现在的XRender包括FormRender、FRGenetator、TableRender和ChartRender四个组件，qq幻想 源码泄露统称为XRender。
1.「FormRender」：协议驱动的表单解决方案。代码示例展示其核心功能不变，遵循「协议驱动渲染」原则。
代码重构，面向未来：FormRender 1.x 对内核进行彻底重构，全面拥抱React Hooks和Antd Design 4.x，增加Typescript类型定义，简化编写方式。swapidc充值界面源码新增beforeFinish、onFinish钩子，用于表单提交前的校验和数据提交，以及onMount方法，类似于React的componentDidMount。引入userForm方法，方便操作表单和schema，提供动态修改功能。新增watch变量，源码里面替换logo用于数据监听，增加组件丰富度，如rate、treeSelect等内置支持，以及通过JSON Schema的format属性自定义组件。
2.「表单设计器」：中后台表单可视化搭建工具，提供可拖拽、可搭建能力，并支持导出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上给予支持。
