ReactHooks之useCallback

还记得我们们在讲父子组件传值的时候用到了useMemo函数吗，useCallback的用法和useMemo是相同的，只不过是useCallback缓存了函数

使用场景

• 父组件向子组件传值的时候，父组件给子组件传递了一个函数
• 如果不进行优化，那么每次父组件进行刷新的时候，都会向子组件传递一个新的函数，尽管每次传递的函数都相同
• 一般传递变量使用useMemo ,传递函数使用useCallback

代码

import { useCallback, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  const increament1 = () => {
    console.log('执行increament1')
    setCount(count + 1)
  }
  const  increament2 = useCallback(()=>{
    console.log('执行increament2')
    setCount(count + 1)
  },[])

  return (
    <div className="App">
      <div>次数:{count}</div>
      <button onClick={increament1}>increament1</button>
      <button onClick={increament2}>increament2</button>
    </div>
  )
}

export default App

1. 当我们点击increament1的时候，我们发现次数正常增加
2. 但是当我们再点击increament2的时候，我们就会发现count直接变成了初始值然后加了一

这时因为我们点击increament2的时候，页面并没有发生变化，他所保存的永远是初始化的count，我们只要将count作为依赖放到数组中，那么就不会出现这种情况了

传递函数

一般当父组件的数据改变的时候，子组件也会进行渲染，以前是useMemo来进行优化性能，他返回一个memoized的值，同理useCallback也是返回一个memoized，只不过他对函数起作用

代码

import { useCallback, useState } from "react";

const Buttons = ({ title, handleClick }) => {
  console.log("执行Buttons");
  return <button onClick={handleClick}>{title}</button>;
};

function App() {
  const [count, setCount] = useState(0);
  const [isShow, setIsShow] = useState(false)
  const handleShow = () => {
    console.log("执行isShow")
    setIsShow(!isShow)
  }
  const increament1 = () => {
    console.log("执行increament1");
    setCount(count + 1);
  };
  const increament2 = useCallback(() => {
    console.log("执行increament2");
    setCount(count + 1);
  }, [count]);

  return (
    <div className="App">
      <div>次数:{count}</div>
      <Buttons title="按钮一" handleClick={increament1}></Buttons>
      <Buttons title="按钮二" handleClick={increament2}></Buttons>
      <button onClick={handleShow}>显示</button>
    </div>
  );
}

export default App;

问题

• 当我们点击显示按钮的时候，尽管这个显示按钮他改变的是父组件的状态，我们会发现相应的子组件也会执行

问题解决

我们要解决的问题是当count不变的时候，对应的子组件应该不刷新才可以，那么我们加上下面的代码就可以了

const Buttons = memo(({ title, handleClick }) => {
  console.log(`执行Buttons${title}`);
  return <button onClick={handleClick}>{title}</button>;
});

当我们点击显示按钮的时候我们卡打印

• 我们会发现子组件按钮二不在刷新
• 关于memo函数的使用 点击