前后端未分离项目如何使用react或者vue部分重构

目前老旧系统是python前后端未分离,现在打算用react重构,但周期较长,所以在新任务上或者部分react重构,这样就有一个问题,就是react重构部分如何与前后端未分离部分数据共享,另外部署和第一次访问的时候,react部分的加载问题?如何可以解决呢?

阅读 5.3k
2 个回答

如果要做部分重构,需要新旧无感对接的话,使用node ,koa2框架构建一个前端服务,使用node 管理你的静态资源,及路由

最近刚好在做用React的重构jQuery的项目,给你分享一下。

1、在旧项目中将需要重构的地方使用<div id="rebuild_id"></div>留下来。
2、完全使用React项目来做那部分重构的内容。这时需要知道从旧的部分需要给react重构的部分传什么参数,React部分需要向旧的代码返回什么?
参数和返回的内容都在index.js中处理。开发时可以写一个mock数据。
类似:

ReactDOM.render(<App params={...}  callback={data => {....}}/>, document.body);

3、用React重构,需要完整的开发完,重构的数据最好不要直接与旧项目与依赖,依赖的部分在第二步中使用参数的方式。
4、集成到旧项目中。改造index.js:

export function startup(containerId, inport, outport) {
    ReactDOM.render(<App {...inport} callback={data => outport(data)} />, document.getElementById(containerId));
}

5、打包,打包的React项目,要在旧项目中能引入,就可以了。这要以旧项目是以什么样的引入方式而定。
6、在旧项目中引入后,直接 startup(......) 就可以了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题