选项钩子

¥Option Hooks

可以更改 Preact 渲染的插件的回调。

¥Callbacks for plugins that can change Preact's rendering.

Preact 支持许多不同的回调，可用于观察或更改渲染过程的每个阶段，通常称为 "选项钩子"（不要与 hooks 混淆）。它们经常用于扩展 Preact 本身的功能集，或创建专门的测试工具。我们所有的插件（如 preact/hooks、preact/compat 和我们的开发工具扩展）都基于这些回调。

¥Preact supports a number of different callbacks that can be used to observe or change each stage of the rendering process, commonly referred to as "Option Hooks" (not to be confused with hooks). These are frequently used to extend the feature-set of Preact itself, or to create specialized testing tools. All of our addons like preact/hooks, preact/compat and our devtools extension are based on these callbacks.

该 API 主要面向希望扩展 Preact 的工具或库作者。

¥This API is primarily intended for tooling or library authors who wish to extend Preact.

版本控制和支持

¥Versioning and Support

Option Hooks 是在 Preact 中提供的，因此在语义上是版本化的。然而，它们没有相同的弃用政策，这意味着主要版本可以更改 API，而无需在发布前延长公告期。对于通过 Options Hooks 公开的内部 API 的结构（如 VNode 对象）也是如此。

¥Option Hooks are shipped in Preact, and as such are semantically versioned. However, they do not have the same deprecation policy, which means major versions can change the API without an extended announcement period leading up to release. This is also true for the structure of internal APIs exposed through Options Hooks, like VNode objects.

设置选项钩子

¥Setting Option Hooks

你可以通过修改导出的 options 对象来在 Preact 中设置 Options Hooks。

¥You can set Options Hooks in Preact by modifying the exported options object.

定义钩子时，请务必确保调用先前定义的同名钩子（如果有）。如果没有这个，调用链将被破坏，依赖于先前安装的钩子的代码将被破坏，导致像 preact/hooks 或 DevTools 这样的插件停止工作。确保也将相同的参数传递给原始钩子 - 除非你有特定原因要更改它们。

¥When defining a hook, always make sure to call a previously defined hook of that name if there was one. Without this, the callchain will be broken and code that depends on the previously-installed hook will break, resulting in addons like preact/hooks or DevTools ceasing to work. Make sure to pass the same arguments to the original hook, too - unless you have a specific reason to change them.

import { options } from 'preact';

// Store previous hook
const oldHook = options.vnode;

// Set our own options hook
options.vnode = vnode => {
  console.log("Hey I'm a vnode", vnode);

  // Call previously defined hook if there was any
  if (oldHook) {
    oldHook(vnode);
  }
}

除 options.event 之外，当前可用的钩子均没有返回值，因此无需处理原始钩子的返回值。

¥None of the currently available hooks excluding options.event have return values, so handling return values from the original hook is not necessary.

可用选项钩子

¥Available Option Hooks

options.vnode

签名：(vnode: VNode) => void

¥Signature: (vnode: VNode) => void

最常见的选项钩子 vnode 在创建 VNode 对象时被调用。VNode 是 Preact 虚拟 DOM 元素的表示，通常被认为是 "JSX 元素"。

¥The most common Options Hook, vnode is invoked whenever a VNode object is created. VNodes are Preact's representation of Virtual DOM elements, commonly thought of as "JSX Elements".

options.unmount

签名：(vnode: VNode) => void

¥Signature: (vnode: VNode) => void

当 vnode 的 DOM 表示仍附加时，在卸载 vnode 之前立即调用。

¥Invoked immediately before a vnode is unmounted, when its DOM representation is still attached.

options.diffed

签名：(vnode: VNode) => void

¥Signature: (vnode: VNode) => void

一旦 vnode 的 DOM 表示被构造或转换为正确的状态，渲染 vnode 后立即调用。

¥Invoked immediately after a vnode is rendered, once its DOM representation is constructed or transformed into the correct state.

options.event

签名：(event: Event) => any

¥Signature: (event: Event) => any

在 DOM 事件由其关联的虚拟 DOM 监听器处理之前调用。当设置 options.event 时，作为事件监听器参数的事件将被替换为 options.event 的返回值。

¥Invoked just before a DOM event is handled by its associated Virtual DOM listener. When options.event is setted, the event which is event listener argument is replaced return value of options.event.

options.requestAnimationFrame

签名：(callback: () => void) => void

¥Signature: (callback: () => void) => void

控制 preact/hooks 中效果和基于效果的功能的调度。

¥Controls the scheduling of effects and effect-based based functionality in preact/hooks.

options.debounceRendering

签名：(callback: () => void) => void

¥Signature: (callback: () => void) => void

一个定时 "deferral" 函数，用于批量处理全局组件渲染队列中的更新。

¥A timing "deferral" function that is used to batch processing of updates in the global component rendering queue.

默认情况下，Preact 使用零持续时间 setTimeout。

¥By default, Preact uses a zero duration setTimeout.

options.useDebugValue

签名：(value: string | number) => void

¥Signature: (value: string | number) => void

当调用 preact/hooks 中的 useDebugValue 钩子时调用。

¥Called when the useDebugValue hook in preact/hooks is called.