VUE逐步向REACT迁移

VUE逐步向REACT迁移

###【背景】

统一前端技术栈，减少项目切换和维护成本。
基础技术建设无法开展，业务和技术组件无法复用，一个技术方案会重复造轮子

###【需求】

统一技术栈，降低维护成本
完善技术生态，技术方案提取和复用，提高效率

迁移步骤及其计划

1. vue集成react
2. react使用vuex数据流
3. 样式隔离
4. 组件逐步迁移
5. 按路由级别逐步迁移页面
6. 页面迁移完毕之后，整体迁移vuex到redux/mobx
7. 干掉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的变化

大致的实现方法

1. 新建context.js文件，里面创建一个context，然后暴露出来。点我
2. 新建provider，引用context实例，做一个高阶组件。点我
3. 新建conect，当前react的组件订阅subscribe。点我
4. 使用方法和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的思想。

但是后来在实践的过程中，还是放弃了。主要出于两点考虑：

1. 流程比较繁琐，需要写各种Action,Reducer。
2. 想要完成异步数据，得配合其他库。

使用mobx来迁移vuex

后来为啥换成了mobx来迁移vuex呢

主要是出于以下两点

1. mobx可以直接初始化之后导出，就像是和vuex一样。export default new Store()
2. 只需要对vuex的commit,getter等方法hack，就能无缝切换。

。。。未完待续

干掉vue以及vuex