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

Question

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

Answer 1

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

Answer 2

最近刚好在做用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(......) 就可以了。