当前位置： 移动技术网 > IT编程>开发语言>JavaScript > React常用hook的优化useEffect浅比较

React常用hook的优化useEffect浅比较

2020年03月27日  | 移动技术网IT编程  | 我要评论

文森特和莱纳,qvod快播资源,邵雅茜

先说说react原版的useeffect使用起来不便的地方

useeffect(
  function() {
    // effect操作
  },
  ['a', 'b', { name: 'c' }]
);

这里的effect每次更新都会执行，因为第三个参数一直是不等的，{name: 'c'} !== {name: 'c'}

第二是在deps依赖很多的时候是真的麻烦

下面贴出改进版useeffect

import { useref, useeffect } from 'react';
import _ from 'lodash';
export function usedeepcompareeffect<t>(fn, deps: t) {
  // 使用一个数字信号控制是否渲染，简化 react 的计算，也便于调试
  let renderref = useref<number | any>(0);
  let depsref = useref<t>(deps);
  if (!_.isequal(deps, depsref.current)) {
    renderref.current++;
  }
  depsref.current = deps;
  return useeffect(fn, [renderref.current]);
}

在使用的时候什么都不用做，只需要把参数传进来就行。

避免了之前的浅比较的缺陷，性能上有降低

deps稍微控制一下量，此处的性能不是大问题

写起来爽就完事了，要啥自行车。

usedeepcompareeffect(function() {
  // effect操作
}, 'a');
usedeepcompareeffect(
  function() {
    // effect操作
  },
  { name: 'c' }
);
usedeepcompareeffect(function() {
  // effect操作
}, 4567);

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网