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])