useUpdate

作者: skoll | 来源:发表于2020-08-18 17:15 被阅读0次

    强行进行一次渲染,没有state变化的时候,好像不是这个,而是按照依赖执行某个函数,是对effect做的一个包装

    import {useEffect,useRef} from 'react'
    export default function useOnUpdate(fn,dep){
        const ref=useRef({fn,mounted:false})
        ref.current.fn=fn
    
        useEffect(()=>{
            if(!ref.current.mounted){
                ref.current.mounted=true
                // 首次渲染不执行
            }else{
                ref.current.fn()
            }
        },dep)
    }
    

    这个才是

    // 强制重新渲染hook
    
    // 递增一个state值,触发react进行渲染
    import React,{useCallback,useState} from 'react'
    
    export default function useForceUpdate(){
        const [,setValue]=useState(0)
    
        return useCallback(()=>{
            setValue(val=>(val+1)%(Number.MAX_SAFE_INTEGER-1))
        },[])
    }
    
    import { useReducer } from 'react'
    
    // make your functional componnet forceupdate to avoid refresh key from parent component
    const useForceUpdate = () => {
      const [_, forceUpdate] = useReducer(s => s + 1, 1)
      return {
        forceUpdate
      }
    }
    
    export default useForceUpdate
    //其他版本
    

    相关文章

      网友评论

          本文标题:useUpdate

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