hooks 系列七:自定义 hook

2,945 阅读3分钟

快来加入我们吧!

"小和山的菜鸟们",为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验,请您移至我们官网小和山的菜鸟们 ( 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 ,而它也并没有什么功能,只是用来返回一个自定义的值。结果展示:

custom-pic.png

对案例进行升级

上面的案例中,我们只是进行简单的展示,而并没有其他的任何操作,你可能还不能理解什么是 自定义 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 标签中展示的是现在 valueinput 的改变函数使用的是自定义中的 onChange,展示值时 myHookValue 中的 value

结果显示:

custom-gif.gif

小结

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

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

下节预告

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