memo、useMemo、useCallback作用和使用方式

1、memo:对组件接收的props属性和方法进行浅对比，假如有改变，更新组件，没有改变，不更新组件；

2、useMemo:

作用：

1、缓存传入子组件的引用类型的值

2、缓存useEffect的依赖值为引用类型的值

注意：禁止单纯为了缓存数据而使用，react设计这个hook的初衷是为了减少子组件的无必要更新而设计的，需要配合memo一起使用；

3、useCallback:

作用：1、缓存传入子组件的函数

注意：和useMemo一致，需要配合memo一起使用，才会极大的优化组件渲染速度；

例子：

//Child子组件
function Child(props){
    return(
        <div onClick={props.onClick('zizujian')}>{props.nam}</div>
    )
}
export default const ChildMemo = memo(Child);

// perent父组件
import {useState,useEffect,useMemo,useCallback,memo} from 'react';
import {ChildMemo} from './Child'
function Perent(){
    const [childData,setChildData] = useState('fuzijian');
    // 缓存子组件依赖的引用类型数据
    const nam = useMemo(()=>{
        return ['1','2'];
    },[]);
    // 缓存子组件依赖的函数
    const handleClick = useCallback((data)=>setChildData(data),[]);
    return (
        <div>{childData}</div>
        <ChildMemo onClick={handleClick} nam={nam}/>
    )
}