道招

vue迁移react使用useReducer hooks还想支持回调?

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

vue迁移react使用useReducer hooks还想支持回调?

鉴于目前有个任务是把手上的vue项目迁移到react,为了尽可能的降低期间造成的功能缺陷,很自然的就会想到使用一个方法一个方法的迁移,有的场景在vue中很自然,在react中,尤其是在使用react hooks时,有的过程就不好弄,我就毕竟苦于在react hooks中没有class组件里面的setState的回调函数,导致后面的取值拿不到最新的state。 比如下面的例子。

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) => {
    switch(action.type) {
        case 'clear':
     retrun {
        a: '',
        b: '',
     }
     case 'upate':

    }
    return {
        ...state,
        ...payload,
    };
}, {
    a: 'a',
    b: 'b',
});

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

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

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

useEffect(() => {
    console.log('useEffect -> ', funA()); // "ab", not the expected "1221--b" like in vue
}, []);

为此自己做了一个简单的npm包,报名就是react-hooks-like-vue, 用了这个包就会是这样,比较解决原来vue中的写法。

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

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

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

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

useEffect(() => {
    console.log('useEffect -> ', funA()); // "1221--b", as expected, like in vue
}, []);
更新时间:
上一篇:Vue同一路由跳转页面不刷新解决方案及注意事项之二下一篇:网址改用七牛云存储图片

相关文章

项目Vue转成React hooks可能存在的问题--急需类似setState回调

假设在Vue中有如下三个方法,并且初始时 this.a = ‘a’; this.b = ‘b’; funA() { this.a = '1221&#03 阅读更多…

转译:使用react hooks优化回调函数在组件间的传递,useState,useReducer?

我们先看一下使用 useState hooks写的todoList组件,里面我们需要层层传递回调函数。 import React, { useState } from "react& 阅读更多…

对React Hooks的Capture value特性的理解

之前我的项目里面很多功能都是用的事件驱动,所以下面的实例也会更多地使用监听事件的回调函数。 我们先看下测试代码 const {useEffect ,useState, useRef, us 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了