useCallback作用:
1雹洗、防止函數(shù)組件的函數(shù)重新生成
let fn = null
const App = () => {
const Child = ({ num }) => {
const testUseCallback = useCallback(() => {
console.log(num)
}, [num])
/*
第一次為false，后面每3s輸出一次多律，為true须教；每次點擊按鈕改變num值后輸出一次false雳灾，后續(xù)輸出為true
*/
console.log(fn === testUseCallback)
fn = testUseCallback
return <div>子組件</div>
}
const Parent = () => {
let timer = useRef(null)
const [count,setCount] = useState(0)
const [num,setNum] = useState(0)
useEffect(()=>{
timer.current = setInterval(() => {
setCount(count + 1)
},3000)
return clearInterval(timer.current)
},[]}
return (
<div>
<div onClick={() => setNum(num + 1)}>點擊修改num值</div>
<Child num={num} count={count} />
</div>)
}
return <Parent />
render(<App {...config} />, document.querySelector('#app'))
