react中useCallback使用案例
阿新 • • 發佈:2021-10-04
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>
)
}
執行展示