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

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

网友评论

      本文标题:useUpdate

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