useCallback useMemo

//useCallback
function father(){
    const [count, setCount] = useState(0);

    const handleClick = useCallback(() => {
      setCount1(count + 1)
    }, [count]);

    return (
      <>
        <button onClick={handleClick}>{count}</button>
      </>
    )
}

//其实在这里并没有任何优化，反而在从新渲染是判断count 而增加了成本


const Button = React.memo(({handleClick})=>{

    return  return (
      <>
        <button onClick={handleClick}>{count}</button>
      </>
    )
})

//如过在上面使用这样的自组件 可以优化子组件重新渲染

//useMemo

const [count, setCount] = useState(0);

const userInfo = useMemo(() => {
  return {
    count: count
  };
}, [count]);

return <UserCard userInfo={userInfo}>

useCallback 缓存的是函数与 useMemo 函数的返回就结果。