hooks 系列五：useCallBack

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这篇文章，我们主要目的是了解一下 （useCallback） 的使用.

useCallback

定义

useCallback 返回一个 memoized 回调函数。

const memoizedCallback = useCallback(fn, deps)

useCallback 所需参数

• fn ：一个函数最终会返回该回调函数，该回调函数仅仅只在 deps 参数发生改变时才会更新。
• deps ： 用于触发 fn 回调函数改变的参数列表。

注意： deps 是一个数组，也就是说改变 fn 的参数可以有很多。

把内联回调函数及依赖项数组作为参数传入 useCallback，它将返回该回调函数的 memoized 版本，该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避免非必要渲染（例如 shouldComponentUpdate）的子组件时，它将非常有用。

如何使用

我们先来看一个简单的例子。

这个是一个子组件，接受父类的一个 fn 方法并展示其按钮。

const ChildComponent = memo(function (props) {
  console.log('child render!')
  return <Button onClick={props.fn}> showTime</Button>
})

注意： 这里的 memo 也是一个 Hooks , 详情请见Hook API 索引 – React (reactjs.org)

这是一个父组件，里面有一个计数器，一个数字增加按钮，和这个子组件。

function Main() {
   
  const [count, setcount] =