强行进行一次渲染,没有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
//其他版本
网友评论