React hooks学习 -- “useCallback”

useCallback

1. 理解默认渲染机制对性能的浪费

在默认渲染机制中,当父组件更新时,即使当子组件中没有数据的更新或其它变化,子组件也会重新渲染,这就造成了性能的浪费.

//理解默认渲染机制对性能的浪费

import {
   useState} from 'react'

function Son(){
   
    console.log('son组件渲染了');
    return <div>this is son</div>
}

function Cpp () {
   
    // 尝试更新Cpp组件
    const [count, setCount] = useState(0)
    return (
        <>
        this is cpp
        <button onClick={
   () => setCount(count + 1)}></button>
        <Son/>
        </>
    )
}