React-hook-useMemo

1. React默认会更新所有子组件
2. class组件使用SCU和Pure Component做优化
3. Hooks中使用useMemo 但优化的原理是相同的

示例

import {memo, useMemo, useState} from "react";

// function Child(props){
//     console.log('child render ... ')
//     return <div>this is child {props.info.name }, {props.info.age}</div>
// }


// 类似 class PureComponent，对props进行浅层比较
const Child = memo((props) =>{
    console.log('child render ... ')
    return <div>this is child {props.info.name }, {props.info.age}</div>
})

function UseMemoDemo(){
    console.log('parent render ... ')
    const [count,setCount] = useState(0)
    const [name,setName] = useState('fux')
    // const info = {
    //     name,
    //     age:20
    // }


    //使用useMemo，有依赖
    const info = useMemo(()=>{
        return {
            name,
            age:20
        }
    },[name])
    return <div>
        <button onClick={()=>setCount(count+1)}>+</button>count:{count}
        <br/>
        <Child info={info}/>
    </div>
}

export default UseMemoDemo