Hook 本质就是 JavaScript 函数,但在当前阶段,我们会将其编译成特殊调用的函数,因此在使用它时需要遵循三条规则。我们也计划在未来提供一个 linter 插件来强制执行这些规则。
我们也在一直优化使用方式,包括编译器的升级,Async Hooks 的方案等。这意味着你在使用 Midway Hooks 时,总能通过底层的升级从而获得更多能力的支持。
只在导出的接口与自定义 Hooks 中调用 Hooks
不要在普通的 JavaScript 函数中调用 Hooks。你可以:
- ✅ 在导出的 API 接口中调用 Hooks(/apis/lambda/ 下导出的函数)
- ✅ 在自定义 Hooks 中调用其他 Hooks
遵循此规则,确保 Hooks 可以正常工作。
Hooks 命名需以 「use
」 开头
我们假设任何以 「use
」 开头并紧跟着一个大写字母的函数就是一个 Hooks。
我们知道这种启发方式并不完美,甚至存在一些伪真理,但如果没有一个全生态范围的约定就没法让 Hook 很好的工作 —— 而名字太长会让人要么不愿意采用 Hook,要么不愿意遵守约定。 —— Hooks FAQ
使用这种命名方式,确保编译器可以正确识别这是一个 Hook 函数,并对其进行处理。
有效的导出方式
export async function useDemo () {}
export const useDemo = async function () {}
export const useDemo = async () => {}
因此如下的导出方式是无效的:
无效
// 无效
export const notHooks = () => {
const ctx = useContext()
}
只在模块顶层编写自定义 Hooks
自定义 Hook 仅支持在模块顶层中编写,而不支持嵌套等形式。
有效的导出方式
export async function useDemo () {}
export const useDemo = async function () {}
export const useDemo = async () => {}
因此如下的导出方式是无效的:
无效
// 无效
export const invalidHooks = {
useHeader: () => {}
}
// 无效
export const useDemo = buildHook(() => {
const ctx = useContext()
})