react中useCallback使用案例

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

}

運行展示