Hooks-useMemo-useCallback

/**
 * memo:判断组件的渲染是否重复执行 <Foo/>
 * useMemo：定义函数逻辑是否重复执行 ()=>{}
 *          useMemo(()=>{},[])； 语法与useEffect一致 ,但调用时机不一样；
 *          useEffect在有副作用的时候执行，useMemo有返回值，返回值参与渲染，所以
 *          useMemo在渲染期间完成
 * useCallback,它是useMemo的变种,useMemo返回值是函数的话，可用useCallback来代替
 *          useMemo(()=>fn)
 *          useCallback(fn)
 */

import React,{memo,useState,useMemo, useCallback} from 'react';

/*function Counter(props){
    console.log('counter render')
    return(
        <h1>{props.double}</h1>
    )
}*/
const Counter = memo(function Counter(props){
    //用了memo后，就不会因为父组件更新而更新，而是进行一次浅层比较
    console.log('counter render')
    return(
        <h1>{props.double}</h1>
    )
})

export default function App(props){
    const [count,setCount] = useState(0);
    const double = useMemo(()=>{
        return count * 2;
    },[count === 3]);
    //如果直接将onClick传入子组件，子组件也会重新渲染，因此
    //需要用useMemo, 如果useMemo返回值为函数，则用useCallbacll
    //要记得第二个参数的使用
    /*const onClick = ()=>{
        return()=>{
            console.log('click')
        }
    }*/
    const onClick1 = useMemo(()=>{
        return()=>{
            console.log('click')
        }
    },[])
    //或者
    const onClick = useCallback(()=>{
            console.log('click')
    },[])

    return(
        <div>
            <button onClick={()=>{setCount(count+1)}}>click</button>
            count:{count}
            <Counter double={double} onClick={onClick} />
        </div>
    )
}