react useMemo useCallback 作用

前言

useMemo和useCallback是作为性能优化的,减少一些不必要的渲染

useMemo

对值的优化,如果这个值是依赖于某个值计算来的,我不希望其他state变化的时候,这个值也被重新渲染。

function Test1 (props) {
    const [a,seta]=useState(0)
    const [b,setB]=useState(0)

    function getRes() {
        console.log('getRes函数执行了');
        return '哈哈哈哈'+b
    }
	
	//使用hook
    const resB=useMemo(getRes,[b])//根据b的值计算渲染
    //不使用hook
    const resB=getRes()
    
    return(
        <>
            <Button onClick={()=>{seta(a=>a+1)}}>a加1</Button>
            <Button onClick={()=>{setB(b=>b+1)}}>b加1</Button>
            <p>a是:{a}</p>
            <p>b是:{b}</p>
            <p>由b计算的值:{resB}</p>
        </>
    )
}

不使用hook的话每次渲染组件时候,无论你点a还是点b都会重新计算一次在这里插入图片描述
使用hook后,只有在b加1的时候才会计算
在这里插入图片描述

useCallback

对函数渲染的优化,不希望这个函数每次state变化的时候,都被重新创建

let set=new Set()//Set集合不会插入重复值
function Test1 (props) {
    const [a,seta]=useState(0)

	/*使用hook写法*/
    const add=useCallback(()=>{seta(a=>a+1)},[])
    
    /*不使用hook的普通写法*/
    const add=()=>{seta(a=>a+1)}

    set.add(add)
    console.log(set.size);

    return(
        <>
            <Button onClick={add}>a加1</Button>
        </>
    )
}

不使用hook每次组件重新渲染都会创建一个新的函数,因为set集不会插入相同的数据,所以很好验证在这里插入图片描述
使用hook后,保证了每次渲染都不会继续创建这个函数在这里插入图片描述

什么是依赖项

usexxx(()=>{},[依赖])

只有当我的依赖发生变化之后,才会执行对应的函数内容,即可以称之为驱动,受到依赖项的驱动发生的改变。

  • 如果不提供依赖项,则会每次渲染后都触发函数
const resB=useMemo(getRes)
  • 如果提供了空的依赖,那么只会执行一次
const resB=useMemo(getRes,[])
  • 如果提供了依赖,那么就如上所说,依赖变化才会变
const resB=useMemo(getRes,[b])
  • 依赖可以是好几个
const resB=useMemo(getRes,[a,b])
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页