23.useCallback使用（React）

介绍

useCallback 是 React 中的一个 Hook，用于记住一个函数的引用，这样当组件重新渲染时，如果依赖项没有变化，就不会创建新的函数实例。这样可以避免不必要的重新渲染。

// 使用 useCallback 来记住这个函数

  const newFunction = useCallback(function(){} , []);

// 依赖项为空数组，表示里面的函数不会因组件渲染而改变

 与useMemo类似

• useCallback 接受两个参数：要记住的函数和依赖数组。

使用场景（例）

memo 中props含函数

下面的代码涉及到父组件 App 和子组件 MemoSon 的渲染过程。

import { memo, useState } from "react";

// 子组件
const MemoSon = memo(function Son(props) {
  console.log(`我是子组件，我渲染了`);
  return <div>我是子组件</div>;
});

// 父组件
function App() {
  const [count, setCount] = useState(0);

  function fn(){}
  
  console.log("父组件渲染");

  return (
    <div className="App">
      <MemoSon fn={fn} />
      <button onClick={() => setCount(count + 1)}>点击渲染父组件</button>
    </div>
  );
}

export default App;

• 当点击 "点击渲染父组件" 按钮时，父组件会重新渲染输出 "父组件渲染"。
• 然而，由于memo组件传递的props里的 fn 函数每次都会被重新定义，导致 MemoSon 的 props（即 fn）发生变化。这会导致 MemoSon 也会重新渲染。

运行结果

用 useCallback 解决

这时就可以用 useCallback 记住这个函数的引用，并传空的依赖数组，使函数不会因组件渲染而重新定义，这样子组件也不会随着父组件一起渲染。

// 父组件
function App() {
  const [count, setCount] = useState(0);

  const newFn = useCallback(function fn(){},[])

  console.log("父组件渲染");

  return (
    <div className="App">
      <MemoSon fn={newFn} />
      <button onClick={() => setCount(count + 1)}>点击渲染父组件</button>
    </div>
  );
}

运行结果

完整代码

import { memo, useCallback, useState } from "react";

// 子组件
const MemoSon = memo(function Son(props) {
  console.log(`我是子组件，我渲染了`);
  return <div>我是子组件</div>;
});

// 父组件
function App() {
  const [count, setCount] = useState(0);

  const newFn = useCallback(function fn(){},[])

  console.log("父组件渲染");

  return (
    <div className="App">
      <MemoSon fn={newFn} />
      <button onClick={() => setCount(count + 1)}>点击渲染父组件</button>
    </div>
  );
}

export default App;