react-hooks useEffect触发时机,依赖项为对象或者数组时应该如何处理?

react hooks的依赖项目可以按照数据类型分为基本数据类型和引用数据类型,当为基本数据类型时useEffect可以根据依赖项的变化而去发生改变,当为引用数据类型时,useeffect总是会被触发,因为useEffect这里进行的时浅比较

eg:当依赖项为基本数据类型时

const [count, setCount] = useState[0];

useEffect(() => {

console.log(count)

}, [count]);

这里当count发生变化时会在useeffect钩子中打印出count

eg:当依赖项为引用数据类型时

const [obj, setObj] = useState({});

useEffect(() => {

console.log(obj)

}, [obj]);

这里只要我们组件中有obj更新,即使obj完全没有变化,也会打印出obj,因为useEffect作的是浅比较,始终会返回false

那如果我们想要的是obj中有发生改变时采取打印obj这个时候要怎么办呢?

解决方法有两种:

第一种:使用useRef

我们只需要写个usePrevious的钩子方法即可

function usePrevious(value) {

const ref = useRef();

useEffect(() => {

ref.current = value;

}, [value]);

return ref.current;

}

然后去使用:

useEffect(() => {

if (!equalsObj(defaultKeysRef, defaultKeys)) {

setDisplayKeys(defaultKeys);

}

}, [defaultKeys, defaultKeysRef]);

这个时候就是当发生改变时才会

第二种:使用use-deep-compare-effect包

import useDeepCompareEffect from 'use-deep-compare-effect';

useDeepCompareEffect(() => {

console.log('deep-keys', defaultKeys);

}, [defaultKeys]);

将useEffect方法替换成useDeepCompareEffect即可

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值