React.useMemo与React.useCallback

使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。

function Child({data, handleClick}) {
    return (
        <button onClick={handleClick}>{data.number}</button>
    )
}

const MemoChild = React.memo(Child);

function App() {
    const [number, setNumber] = React.useState(0);
    //希望data在App组件重新渲染的时候，如果number变了就变成新的data,如果number没有变，就返回老data
    let data = React.useMemo(() => ({number}), [number]);
    //希望handleClick在App组件重新渲染的时候，如果number变了就返回新handleClick
    ,如果number没有变，就返回handleClick
    let handleClick = React.useCallback(() => setNumber(number + 1), [number]);
    return (
        <div>
            <MemoChild data={data} handleClick={handleClick}/>
        </div>
    )
}