关于前端: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 的总结，并用实战案例帮忙大家进一步了解