useCallBack是用来进行性能优化的，useCallback会返回一个函数的memoizes(记忆的)值，在依赖不变的情况下，多次定义返回的值是相同的

案例一： 使用useCallBack和不使用定义一个函数传递给子组件是否会有性能优化

1.在一个组件中的函数传递给子元素进行回调使用时，使用useCallback进行处理

show切换父组件进行重新渲染， btn1，btn2子组件也会进行重新渲染

const CButton =(props: any) => {
  console.log(props.title + "--CButton重新渲染");
  return <button onClick={props.onAdd}>{props.title}</button>;
}


export default function MempCounter() {
  console.log("重新渲染");
  const [count, setCount] = useState(1);
  const [show, setShow] = useState(false);
  const onAdd = () => {
    console.log("执行函数");
    setCount(count + 1);
  };
  const onAdd1 = useCallback(() => {
    console.log("执行函数1");
    setCount(count + 1);
  }, [count]);
  const onShow = () => {setShow(show ? false : true)};
  return (
    <div>
      <p>{count}</p>
      <CButton onAdd={onAdd} title="1:+1" />
      <CButton onAdd={onAdd1} title="1:+2" />
      <button onClick={onShow}>显示隐藏{show}</button>
    </div>
  );
}

用memo包裹进行浅层比较props，btn1重新渲染，btn2没有重新渲染

const CButton =memo(
(props: any) => {
  console.log(props.title + "--CButton重新渲染");
  return <button onClick={props.onAdd}>{props.title}</button>;
})

小结 通常使用useCallBack目的是不希望子组件多次渲染，并不是为了函数进行缓存

结束语

希望大家能够喜欢我的文章，我真的很用心在写，也希望通过文章认识更多志同道合的朋友。

最后伙伴们，如果喜欢我的可以给点一个小小的赞👍或者关注➕都是对我最大的支持。