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 [value, setValue] = useState(initValue || '')
  return value
}

function App() {
  const myHookValue = useMyHook('myHook')
  return <div className="app">{myHookValue}</div>
}

上述代码中，我们就可以看出，我自定义了一个名为 useMyHook 的自定义 hook ，而它也并没有什么功能，只是用来返回一个自定义的值。结果展示：

对案例进行升级

上面的案例中，我们只是进行简单的展示，而并没有其他的任何操作，你可能还不能理解什么是 自定义 hook，那么现在，我们来对上面的案例进行升级，加入一个 input，来让你更清楚的认识到 自定义 hook.

我们现在需要有一个输入框，并通过一个自定义 hook ，来对它进行值的传递和函数值的修改。

import { useState } from 'react'

const useMyHook = (initValue) => {
  const [value, setValue] = useState(initValue || '')
  const onChange = (e) => {
    setValue(e.target.value)
  }
  return { value, onChange }
}

function App() {
  const myHookValue = useMyHook('myHook')
  return (
    <div className="app">
      <p>value:{myHookValue.value}</p>
      <input value={myHookValue.value} onChange={myHookValue.onChange} />
    </div>
  )
}

上面的代码中，我们建了一个可以通过输入框输入内容实时更改数据的案例。

通过一个 自定义 hook useMyHook 来实现，在这里，我们在 自定义 hook 中返回一个 value ，用来展示现在的值。一个 onChange 函数，用来修改当前的 value。而我们在使用时，p 标签中展示的是现在 value，input 的改变函数使用的是自定义中的 onChange，展示值时 myHookValue 中的 value。

结果显示：

小结

至此，我们最简单的自定义 hook 案例就结束了。

自定义 hook 必须要以 use 开头命名，在其内部调用其他 hook 。比如 例子中我们使用的 useMyHook，就是 use 开头的命名，在其中调用了 useState.

下节预告

到这里，hooks 的学习快要结束了，后面我们将会帮助大家进行 hooks 的总结，并用实战案例帮助大家进一步理解