react中useCallback使用案例

 

import React,{useState,useCallback,useEffect} from "react"

const set = new Set();
export default function UseCallback(){
// 返回一个数组,第一个值是状态,第二个是改变状态的函数
const [num, setNum] = useState(1);
const [age, setAge] = useState(18);

// function getDoubleNum(){
//   console.log('获取双倍的num');
//   return 2*num
// }

// 在使用方法上和useMemo相同
//useMemo返回的是一个值,useCallback返回的是一个函数
// 不同点 useMemo返回的是一个值,useCallback返回的是一个函数
// 如果依赖不更新则返回的还是之前的函数,否则就是返回新函数
const getDoubleNum = useCallback(() =>{
    console.log('获取双倍的num');
  return 2*num
},[num])

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

return(
    <div onClick={() => setNum(num +1)}>这是一个函数式组件--{getDoubleNum()}  ---age:{age}
    
        <Child callback={getDoubleNum} />
    </div>
)

}

function Child(props){
// console.log(props.callback);

useEffect(() =>{
    console.log('callback更新了');
},[props.callback])

return(
    <div>
        child
    </div>
)

}

运行展示