使用useCallback React.mome useMemo优化

为什么要使用useCallback React.mome useMemo？

首页我们需要明确一点：函数式组件为什么会更新？

1、父组件传入的props更新了。

2、父组件更新渲染了，引起了子组件更新。

3、由于组件内部有setState触发组件更新。

由于组件更新重新render会导致重新渲染，这样的话如果一个页面内子组件过多那么就会导致浏览器多次渲染组件浪费性能，所以为了避免浏览器的无用渲染，可以推荐使用useCallback React.mome useMemo来优化，不过一般的情况下浏览器重绘dom是很快的，所以基本上用处不大，如果你是多页面伴随图表的绘制可能需要用到，其他时候不需要刻意使用。

1.第一种情况：父组件传入的props更新了，比如下面一段代码：

// 父组件
function Test() {
    const [num, setnum] = useState(0);
    const [count, setcount] = useState(0);
    const addNum = () => {
       setnum(val => val+=1)  
    }
    return (
        <div>
            <span>{num}</span>
            <button onClick={addNum}>点击</button>
            <Ctest count={count}></Ctest>
        </div>
    )
}

// 子组件
const Ctest = (props: any) =>