useCallback 是 React 提供的一个 Hook 函数，用于优化性能。它的作用是返回一个记忆化的函数，当依赖发生变化时，才会重新创建并返回新的函数。
在 React 中，当一个组件重新渲染时，所有的函数都会被重新创建。这可能会导致一些问题，特别是在涉及到将函数作为 prop 传递给子组件时，因为每次父组件重新渲染时，子组件都会接收到一个新的函数 prop，从而触发子组件的不必要的重新渲染。
使用 useCallback 可以避免这个问题。它接收两个参数：一个回调函数和一个依赖数组。当依赖数组中的值发生变化时，返回的回调函数会被重新创建，否则会返回之前创建的回调函数。
示例代码
App 根组件，引入了 ChildCom1 和 ChildCom2 这两个子组件：
import { useState } from 'react';
import ChildCom1 from "./components/ChildCom1"
import ChildCom2 from "./components/ChildCom2"
import styles from "./css/App.module.css"
function App() {
const [counter, setCounter] = useState(0);
console.log("App渲染了")
return (
<div className={styles.container}>
<div className={styles.btnContainer}>
<div>{counter}</div>
<button onClick={() => setCounter(counter + 1)}>+1</button>
</div>
<div className={styles.childComContainer}>
<ChildCom1 />
<ChildCom2 />
</div>
</div>
);
}
export default App;
ChildCom1 子组件：
import { useState } from "react"
function ChildCom1() {
const [counter, setCounter] = useState(0);
console.log("ChildCom1 渲染了")
return (
<div style={{
width: "200px",
height: "100px",
border: "1px solid"
}}>
ChildCom1
<div>{counter}</div>
<button onClick={() => setCounter(counter + 1)}>+1</button>
</div>
);
}
export default ChildCom1;
ChildCom2 组件基本相同
此时在我们的应用中，各个组件内部维护了自身的数据，组件内部数据的更新并不会影响到同级组件和祖级组件。效果如下：
可以看到，父组件的更新会导致两个子组件更新，这是正常的，子组件各自的更新不会影响其他组件。
但是，倘若两个子组件的数据都来自于父组件，情况就不一样了。
这里我们把上面的代码稍作修改，如下：
App.jsx 根组件，为两个子组件提供了数据以及修改数据的方法
import { useState } from 'react';
import ChildCom1 from "./components/ChildCom1"
import ChildCom2 from "./components/ChildCom2"
import styles from "./css/App.module.css"
function App() {
const [counter, setCounter] = useState(0);
const [counter1, setCounter1] = useState(0);
const [counter2, setCounter2] = useState(0);
console.log("App渲染了")
return (
<div className={styles.container}>
<div className={styles.btnContainer}>
<div>{counter}</div>
<button onClick={() => setCounter(counter + 1)}>+1</button>
</div>
<div className={styles.childComContainer}>
<ChildCom1 counter={counter1} setCounter={setCounter1}/>
<ChildCom2 counter={counter2} setCounter={setCounter2}/>
</div>
</div>
);
}
export default App;
ChildCom1 子组件接收从父组件传递过来的数据，并调用父组件传递过来的方法修改数据
function ChildCom1(props) {
console.log("ChildCom1 渲染了")
return (
<div style={{
width: "200px",
height: "100px",
border: "1px solid"
}}>
ChildCom1
<div>{props.counter}</div>
<button onClick={() => props.setCounter(props.counter + 1)}>+1</button>
</div>
);
}
export default ChildCom1;
效果如下：
可以看到，在更新子组件的数据时，由于数据是从父组件传递下去的，相当于更新了父组件数据，那么父组件就会重新渲染，最终导致的结果就是父组件下面所有的子组件都重新渲染了。
首先，我们会想到使用前面所讲的 React.memo 来解决这个问题，如下：
import React from "react"
function ChildCom1(props) {
console.log("ChildCom1 渲染了")
return (
<div style={{
width: "200px",
height: "100px",
border: "1px solid"
}}>
ChildCom1
<div>{props.counter}</div>
<button onClick={() => props.setCounter(props.counter + 1)}>+1</button>
</div>
);
}
// 相同的 props 传入的时候该组件不需要重新渲染
export default React.memo(ChildCom1);
在上面的代码中，我们使用 React.memo 来缓存 ChildCom1 组件，这样在相同的 props 传入时，该组件不会重新渲染。
但是假设此时 App 组件还有一个单独的函数传入，那就不那么好使了：
function App() {
// App 组件自身有一个状态
// ...
console.log("App 渲染了")
function test() {
console.log("test");
}
return (
<div className={styles.container}>
{/* ... */}
<div className={styles.childComContainer}>
<ChildCom1 counter={counter1} setCounter={setCounter1} test={test} />
<ChildCom2 counter={counter2} setCounter={setCounter2} test={test} />
</div>
</div>
);
}
在上面的代码中，我们还向两个子组件传入了一个 test 函数，由于每次 App 组件的重新渲染会生成新的 test 函数，所以对于两个子组件来讲传入的 test 导致 props 不同所以都会重新渲染。
此时就可以使用 useCallback 来解决这个问题，语法如下：
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);
把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。
接下来我们来使用 useCallback 优化上面的问题，对 App.jsx 做如下的修改：
import React, { useState, useCallback } from 'react';
import ChildCom1 from "./components/ChildCom1"
import ChildCom2 from "./components/ChildCom2"
import styles from "./css/App.module.css"
function App() {
const [counter, setCounter] = useState(1); // 这是 App 组件自身维护的状态
const [counter1, setCounter1] = useState(1); // 这是要传递给 ChildCom1 组件的数据
const [counter2, setCounter2] = useState(1); // 这是要传递给 ChildCom2 组件的数据
console.log("App组件渲染了")
// 每次重新渲染的时候，就会生成一个全新的 test 函数
// 使用了 useCallback 之后，我们针对 test 函数做了一个缓存
const newTest = useCallback(function test(){
console.log("test触发了")
},[])
return (
<div className={styles.container}>
{/* 自身的计数器 */}
<div className={styles.btnContainer}>
<div>counter:{counter}</div>
<button onClick={() => setCounter(counter + 1)}>+1</button>
</div>
{/* 使用子组件 */}
<div className={styles.childComContainer}>
<ChildCom1 counter={counter1} setCounter={setCounter1} test={newTest}/>
<ChildCom2 counter={counter2} setCounter={setCounter2} test={newTest}/>
</div>
</div>
);
}
export default App;
在上面的代码中，我们对 test 函数做了缓存，从而保证每次传入到子组件的这个 props 和之前是相同的。
注意
- 记住：
useCallback主要就是对函数进行缓存 - 使用 useCallback 可以提高性能，避免不必要的重渲染。但需要注意的是，过度使用 useCallback 也可能会导致性能问题，因为每次依赖数组的值发生变化时，都会触发函数的重新创建。因此，需要结合具体的场景和需求来决定是否使用
useCallback。
