オプションフック

オプションフックはPreactのレンダリングを変更するプラグインのためのコールバック機構です。

Preactはレンダリングプロセスの各段階での状態を観察または変更するためのコールバック関数を設定することができます。 それらのコールバック関数は一般的にオプションフックと呼ばれます(フックと混同しないよう注意してください。)。 それらはPreactの機能を拡張したりPreact向けのテストツールを作成することに使われます。 preact/hooks、preact/compat、devtoolsはオプションフックを使っています。

このAPIはPreactを拡張するツールやライブラリの開発者向けです。

バージョン管理とサポート

オプションフックはpreactパッケージに含まれています。そして、それはpreactと同様にセマンティックバージョニングで管理されています。 しかし、オプションフックは他のpreactのAPIとはdeprecationポリシーが異なります。 オプションフックのAPIはメジャーバージョンアップ時に長い周知期間がなく変更されることがあります。 これはVNodeオブジェクトのようにオプションフックで扱う内部APIの構造にも当てはまります。

オプションフックを設定する

オプションフックはexportされたoptionsオブジェクトを変更して設定します。

既に存在するオプションフックと同名のオプションフックを設定する場合は、必ず既存のオプションフックを新しいオプションフック内で実行するように設定してください。 これをしないとコールチェーンが壊れます。そして、既存のオプションフックに依存しているコードは正常に動作しません。その結果、preact/hooksやDevToolsのようなアドオンは正常に動作しなくなります。 また、変更する特別な理由がない限り既存のオプションフックにも同じ引数を渡してください。

import { options } from 'preact';

// 既存のvnodeオプションフックを保存する。
const oldHook = options.vnode;

// 新しいvnodeオプションフックを設定する。
options.vnode = vnode => {
  console.log("Hey I'm a vnode", vnode);

  // 既存のオプションフックが存在している場合、それを実行する。
  if (oldHook) {
    oldHook(vnode);
  }
}

eventオプションフック以外のオプションフックは戻り値を返しません。なので、既存のオプションフックの戻り値を気にする必要はありません。

利用可能なオプションフック

`options.vnode`

API: (vnode: VNode) => void

最も一般的なオプションフックです。 vnodeオプションフックはVNodeオブジェクトが生成されるたびに実行されます。 vnodeはPreactの仮想DOM要素を表します。仮想DOM要素はよくJSX要素とも考えられます。

`options.unmount`

API: (vnode: VNode) => void

vnodeがアンマウントされる直前(DOMが存在している時)に実行されます。

`options.diffed`

API: (vnode: VNode) => void

vnodeがレンダリングされた直後、つまり、DOMが構築されるか、あるべき状態に変更された後に実行されます。

`options.event`

API: (event: Event) => any

DOMイベントが仮想DOMのイベントリスナに渡される直前に実行されます。 options.eventが設定されている場合、イベントリスナの引数として渡されるeventはoptions.eventの戻り値に置き換えられます。

`options.requestAnimationFrame`

API: (callback: () => void) => void

preact/hooks内の副作用と副作用ベースの処理のスケジューリングを行う関数を設定します。

`options.debounceRendering`

API: (callback: () => void) => void

コンポーネントがレンダリングされる処理を遅延させる処理を行う関数を設定します。

options.debounceRenderingはデフォルトではPromise.resolve()を遅延処理に使います。Promiseが使えない場合はsetTimeoutを使います。

`options.useDebugValue`

API: (value: string | number) => void

useDebugValueフックが実行された時に実行されます。