快来退出咱们吧!
“ 小和山的菜鸟们 ”,为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验,请您移至咱们官网小和山的菜鸟们 (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
的总结,并用实战案例帮忙大家进一步了解