简单来说就是返回一个函数，只有在依赖项发生变化的时候才会更新（返回一个新的函数）。
import React, { useState, useCallback } from 'react'; import Button from './Button';
export default function App() { const [count1, setCount1] = useState(0); const [count2, setCount2] = useState(0); const [count3, setCount3] = useState(0);
const handleClickButton1 = () => { setCount1(count1 + 1); };
const handleClickButton2 = useCallback(() => { setCount2(count2 + 1); }, [count2]);
return (
const Button = ({ onClickButton, children }) => { return ( <> {children} {Math.random()} </> ); };
export default React.memo(Button); 复制代码 在案例中可以分别点击Demo中的几个按钮来查看效果：
点击 Button1 的时候只会更新 Button1 和 Button3 后面的内容; 点击 Button2 会将三个按钮后的内容都更新; 点击 Button3 的也是只更新 Button1 和 Button3 后面的内容。
上述效果仔细理一理就可以发现，只有经过 useCallback 优化后的 Button2 是点击自身时才会变更，其他的两个只要父组件更新后都会变更（这里Button1 和 Button3 其实是一样的，无非就是函数换了个地方写）。下面我们仔细看看具体的优化逻辑。
这里或许会注意到 React.memo 这个方法，此方法内会对 props 做一个浅层比较，如果如果 props 没有发生改变，则不会重新渲染此组件
注意
并不是加了useCallback包裹的一层里面的函数就不重新生成更新了 在状态和属性发生变化时，不管是其他函数还是包裹在 useCallback 里面的函数 都会进行重新渲染， 只是它多了一层比较，决定是否要返回新的函数，若依赖项发生变化，才会返回新函数，useCallback 是要配合子组件的 shouldComponentUpdate 或者 React.memo 一起来使用的，否则就是反向优化。
