溪客(编程代码)

跟useState类似，可以缓存返回值，有点类似useMemo的阉割版，只有返回功能，不具有set功能

当使用useMemo时，会返回缓存的数据，子组件不会因为父组件重新呈现而重新呈现

来个例子，当点击button的时候，因为name没变，对Child来说，不需要做重新呈现，那么使用useMemo即可实现这一点

const Child = memo(({data}) =>{
    console.log('child render...', data.name)
    return (
        <div>
            <div>child</div>
            <div>{data.name}</div>
        </div>
    );
})

const Hook =()=>{
    console.log('Hook render...')
    const [count, setCount] = useState(0)
    const [name, setName] = useState('rose')

   const data = useMemo(()=>{
        return {
            name
        }
    },[name])
    
    return(
        <div>
            <div>
                {count}
            </div>
            <button onClick={()=>setCount(count+1)}>update count </button>
            <Child data={data}/>
        </div>
    )
}