解决useEffect对model的循环依赖问题

场景:

在组件中使用了useEffect,每当某一依赖项变化,就需要将model中的另一state自增1,这种需要该如何实现?

解决思路分析:

如果我们在useEffect中添加了自增项依赖,这会造成循环依赖问题:

即当model中state更新,useEffect会执行,去更新model的state,而后者更新又会造成useEffect再次执行,从而再次更新model的state...... 形成循环执行。

那是否可以不添加依赖呢?不添加依赖的话,又拿不到当前的值,难以实现自增。

破局:使用reducer

在上面的场景中,核心问题是使model的state自增1,那其实我们不用在useEffect中获取最新值,也可以实现,那就是使用reducer。

使用reducer时,useEffect中调用reducer不用添加model的state依赖,因此不会引起循环依赖,下面是一示例代码:

// 组件中
useEffect(() => {
    dispatch({type: 'aaa/selfAddB'});
},[a,dispatch]);

// model中
{
  state:{
    a: 0,
    b: 0,
  }
  reducers:{
   	selfAddB(state) {
	  return {
        ...state,
        b: state.b + 1
      };
    },
  },
  ...
}

这样,当a变化时,会调用reducer,使b自增1,但又不会引起循环执行问题。

猜你喜欢

转载自blog.csdn.net/u012443286/article/details/127562299
今日推荐