React-hook-useCallback

1. useMemo缓存数据
2. useCallback缓存函数
3. 两者是ReactHooks的常见优化策略

给Child传了函数，且该函数如果没有使用useCallback，那么Child的memo会失效

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

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

function UseMemoDemo(){
    console.log('parent render ... ')
    const [count,setCount] = useState(0)
    const [name,setName] = useState('fux')

    //使用useMemo，有依赖
    const info = useMemo(()=>{
        return {
            name,
            age:20
        }
    },[name])

    // const onChange = e =>{
    //     console.log('onChange: ',e.target.value)
    // }

    const onChange =  useCallback(e =>{
        console.log('onChange: ',e.target.value)
    },[])

    return <div>
        <button onClick={()=>setCount(count+1)}>+</button>count:{count}
        <br/>
        <Child info={info} onChange={onChange}/>
    </div>
}

export default UseMemoDemo