useUpdate

2020-08-18  本文已影响0人  skoll

强行进行一次渲染,没有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
//其他版本
上一篇 下一篇

猜你喜欢

热点阅读