useCallbacl的使用

useCallbacl的作用

useCallback用于性能优化， 缓存函数， 使组件重新渲染时得到相同的函数实例

useCallback的使用方法

import React, {useState, memo, useCallback} from "react";

function CallBack (){
    const [count, setCount] = useState(0)

    const resultCount = useCallback(() => setCount(0), [setCount])
    return (
        <div>
            <div>{count}</div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <My_Memo2 resultCount = {resultCount} />
        </div>
    )
}
const My_Memo2 = memo(function My_Memo2 (props){
    console.log('My_Memo2')
    return (<div>
            <div>My_Memo2</div>
            <button onClick={props.resultCount}>清零</button>
        </div>)
})
console.log(My_Memo2)


export default CallBack;

上述代码说明： 在之前的文章中我们用了memo阻止了没有数据变化的组件重新渲染，但是在有些场景涉及到组件间的通信，当进行组件间参数传递的时候，我们被memo包裹的组件又会重新渲染了，但是组件内部的值时没有变化的，这是为什么？ 原因时通过setCount改变count值，当count值改变了，当前组件会重新渲染，当组件重新渲染我们给子组件传递的方法会再一次重新传递，这样会被memo认为被包裹的组件变化了，所以导致内部的组件更新， 解决这个问题使用useCallback方法 ，这个方法接收2个参数， 第一个参数就是我们需要传递的方法， 第二个参数就是我们需要监听的参数， 只要参数没有变化，那么每次组件更新，useCallback的第一个参数就是相同的函数实例，这样就不会导致里层组件的重新渲染；