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 函数,并对其进行处理。

有效的导出方式

  1. export async function useDemo () {}
  2. export const useDemo = async function () {}
  3. export const useDemo = async () => {}

因此如下的导出方式是无效的:

无效

  1. // 无效
  2. export const notHooks = () => {
  3. const ctx = useContext()
  4. }

只在模块顶层编写自定义 Hooks

自定义 Hook 仅支持在模块顶层中编写,而不支持嵌套等形式。

有效的导出方式

  1. export async function useDemo () {}
  2. export const useDemo = async function () {}
  3. export const useDemo = async () => {}

因此如下的导出方式是无效的:

无效

  1. // 无效
  2. export const invalidHooks = {
  3. useHeader: () => {}
  4. }
  5. // 无效
  6. export const useDemo = buildHook(() => {
  7. const ctx = useContext()
  8. })