美文网首页
useDeepCompareEffect

useDeepCompareEffect

作者: skoll | 来源:发表于2020-10-29 16:45 被阅读0次
// 当依赖对象是数组或者对象的时候,用这个
// 其实我用set操作,是可以保证每次都是新的数据的,这个组件也不是那么必要,可能是针对不熟悉hook用法的人,来直接替代useEffect钩子

import {DependencyList,EffectCallback,useEffect,useRef}from 'react'

import isEqual from 'react-fast-compare'

const isPrimitive = (val:any)=>val!==Object(val)

export default function useDeepCompareEffect(effect:EffectCallback,deps:any[]){
    if(!deps||!deps.length){
        console.warn("deps 里面不能没有数据")
    }

    if(deps.every(isPrimitive)){
        console.warn('原始类型的值,使用useEffect来替代吧')
    }

    // 前面不能有return。
    const ref=useRef<DependencyList | undefined>(undefined)

    if(!isEqual(deps,ref.current)){
        ref.current=deps
    }
    useEffect(effect,ref.current)
}

网友评论

      本文标题:useDeepCompareEffect

      本文链接:https://www.haomeiwen.com/subject/dfflvktx.html