寻求从ADF迁移至React前端栈的实操参考指南

前期准备 #

• 梳理现有ADF资产：逐个盘点ADF页面里的核心组件（比如af:table、af:form）、依赖的后端ADF BC服务，输出组件-接口映射清单，重点标记业务核心、高频使用的模块。
• 技术栈适配：因为后端用JRE 1.6，要保证React前端调用接口时兼容跨域——要么后端加CORS配置，要么前端用反向代理；前端选React 17+（兼容旧浏览器），搭配TypeScript做类型校验，降低重构bug率。
• 隔离开发环境：别在现有JDeveloper项目里改，单独搭React项目，直接复用后端接口联调，完全不影响原有ADF系统运行。

迁移策略落地 #

结合你了解的自下而上/自上而下方法，适配ADF特性调整：

• 自下而上（组件级替换）
  • 从最独立、低依赖的ADF组件开始换，比如把af:inputText、af:commandButton这类基础组件换成React原生组件或Ant Design组件，重点验证接口调用逻辑（ADF的invokeAction对应React里的fetch/axios请求）。
  • 别一直用iframe凑活，组件替换后用微前端方案（比如模块联邦）整合到ADF页面，iframe只当临时过渡，避免样式冲突、通信复杂的问题。
• 自上而下（页面级替换）
  • 先挑业务独立、用户少的完整ADF页面（比如后台配置页）全量替换，从路由、布局到接口调用全用React实现，验证页面跳转、权限控制（ADF的securityContext对应React的权限拦截器）。
  • 替换后保留原ADF入口，加个开关让用户可以切换新旧页面，收集反馈没问题了再逐步切流量。

iframe过渡阶段优化（实操细节） #

• 统一通信规则：定好postMessage的格式，比如React给ADF父页面发{ type: 'DATA_UPDATE', payload: {...} }，ADF用AdfPage.getCurrent().addCallback监听，别乱发消息导致逻辑混乱。
• 样式隔离：React页面加全局样式前缀，和ADF默认样式划清界限；同时改掉ADF页面里影响iframe的全局样式（比如body的margin、padding）。
• 性能优化：给非关键iframe加loading="lazy"延迟加载，常用资源提前预加载，别拖慢主页面速度。

必避的迁移陷阱 #

• 接口兼容坑：ADF的REST接口可能返回XML，要么后端加JSON格式支持，要么前端写个XML转JSON的工具；还要注意ADF接口的会话保持（JSESSIONID），React请求得带对应Cookie。
• 状态管理坑：ADF是服务器端维护页面状态，React是客户端状态，迁移时要明确边界——业务核心状态（比如用户信息、订单数据）还是后端管，React只负责客户端交互状态（比如表单输入、弹窗显示）。
• 权限控制坑：ADF的权限在jazn-data.xml里配置，迁移时要把权限逻辑同步到React前端，但必须通过后端接口校验，别只在前端判断，容易被绕过。
• 浏览器兼容坑：JRE 1.6对应的浏览器可能偏老（比如IE 8/9），要把React的Babel编译目标设为IE 9，用core-js补全缺失的JS API。

后续迭代方向 #

• 逐步淘汰iframe：当React模块覆盖80%以上业务后，直接把React当主前端框架，移除ADF基座，直接对接后端接口。
• 统一技术栈：用React Query管数据请求，替代ADFaf:query的查询逻辑；用React Router管路由，换掉ADF的af:navigationPane。
• 补全测试：给React组件写单元测试、集成测试，弥补ADF前端缺测试的短板，提升代码稳定性。

内容的提问来源于stack exchange，提问作者Botond Balogh