react-hooks-like-vue

use react hooks with your vue way helps you migrate vue methods to react one by one, then the vue project become to react project.

In vue

export default {
  name: 'VueComponent',
  data() {
    return {
      a: 'a',
      b: 'b',
    };
  },
  mounted() {
    console.log('result', this.funA()); // 1221--b
  },
  methods: {
    funA() {
      this.a = '1221';
      this.funB();
      return this.funC();
    },
    funB() {
      this.a = this.a + '--';
    },
    funC() {
      return this.a + this.b;
    }
  }
};

To react

import React, { useReducer } from 'react';
const [state, dispatch] = useReducer((state, action) => {
return {
 ...state,
 ...action,
};
  },{
    a: 'a',
    b: 'b',
  });

  function funA() {
    // dispatch({
    //   a: '1221',
    // });
    dispatch('a', '1221')
    funB();
    return funC();
  }

  function funB() {
    dispatch({
      a: state.a + '--',
    });
  }

  function funC() {
    return state.a + state.b;
  }

  useEffect(() => {
    console.log('useEffect -> ', funA());
  }, []);

const { useDispatch } from 'react-hooks-like-vue';
const [state, dispatch] = useDispatch({
 a: 1,
 b: 2,
});