hooks 系列七：自定义 hook

快来加入我们吧！

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

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

自定义 hook

官方文档在讲自定义 hook时，给了一个好友状态的例子，但是例子较为复杂，难懂。在这里我们用一种更简单的方式，教您学会自定义 hook。

什么是自定义 hook

当我们想在两个函数之间共享逻辑时，我们会把它提取到第三个函数中。而组件和 hook 都是函数，所以也同样适用这种方式。

自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 hook

与组件中一致，请确保只在 自定义 hook 的顶层无条件地调用其他 hook

一个简单的自定义 hook 案例

使用一个最简单的代码来了解一下自定义 hook

import {
    useState } from 'react'

const useMyHook = (initValue) => {
   
  const