hooks 系列七：自定义 hook

快来加入咱们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( 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 的总结，并用实战案例帮助你们进一步理解