VUE逐步向REACT迁移
###【背景】
统一前端技术栈,减少项目切换和维护成本。
基础技术建设无法开展,业务和技术组件无法复用,一个技术方案会重复造轮子
###【需求】
统一技术栈,降低维护成本
完善技术生态,技术方案提取和复用,提高效率
迁移步骤及其计划
- vue集成react
- react使用vuex数据流
- 样式隔离
- 组件逐步迁移
- 按路由级别逐步迁移页面
- 页面迁移完毕之后,整体迁移vuex到redux/mobx
- 干掉vue以及vuex
tips:
1.第4步和第5步同时进行
2.笔者目前正在第6步
VUE集成REACT
vue的**渲染函数 & JSX**为vue里面集成react提供了可能。
网上资源也很多,就不详细展开了
贴一段小小的代码吧
Vue.react2vue = (ReactComponent, options = {}) => Vue.component('UseReact', {
render(createElement) {
return createElement(vueUseReact(ReactComponent, { styleEffect: 'both', ...options }), {
props: { store },
});
},
});
React使用Vuex数据流
最重要的一条思路是:使用vuex的实例方法subscribe来订阅store的变化
大致的实现方法
- 新建context.js文件,里面创建一个context,然后暴露出来。点我
- 新建provider,引用context实例,做一个高阶组件。点我
- 新建conect,当前react的组件订阅subscribe。点我
- 使用方法和redux类似。点我
import React from 'react';
import Vue from 'vue';
import { Provider } from 'react-use-vuex';
import Com from './container';
import './index.scss';
const Hook = props => (
<Provider store={props.store}>
<Com data = {props.store}/>
</Provider>
);
export default Vue.react2vue(Hook, { wrapClass: 'login-page' });
样式隔离
使用了react-scoped-css这个库
比较方便的实现了样式的隔离
至于为啥没选module-css
,和现在做的项目技术选型有点相关吧。
这里样式隔离还是有比较多的成熟的方案的
组件逐步迁移
按照上面的react使用vuex数据里的方式,逐步迁移组件。
按路由级别逐步迁移页面
迁移完组建后,按照页面级别开始迁移。
页面迁移完毕之后,整体迁移vuex到Mobx
关于数据流迁移是我考虑的最久的设计方案
一开始我的想法是从vuex
迁移到redux
,因为我写react-use-vuex
这个库的想法或者思路就是来自于redux的思想。
但是后来在实践的过程中,还是放弃了。主要出于两点考虑:
- 流程比较繁琐,需要写各种
Action
,Reducer
。 - 想要完成异步数据,得配合其他库。
使用mobx来迁移vuex
后来为啥换成了mobx来迁移vuex呢
主要是出于以下两点
- mobx可以直接初始化之后导出,就像是和vuex一样。
export default new Store()
- 只需要对vuex的
commit
,getter
等方法hack,就能无缝切换。
。。。未完待续