APIリファレンス

このページでは、エクスポートされたすべての関数を簡単に概説します。

Component

Componentは、ステートフルなPreactコンポーネントを作成するために拡張できる基本クラスです。

コンポーネントは直接インスタンス化されるのではなく、レンダラーによって管理され、必要に応じて作成されます。

import { Component } from 'preact';

class MyComponent extends Component {
  // (see below)
}

Component.render(props, state)

すべてのコンポーネントはrender()関数を提供する必要があります。render関数には、コンポーネントの現在のpropsとstateが渡され、仮想DOM要素（通常はJSX「要素」）、配列、またはnullを返す必要があります。

import { Component } from 'preact';

class MyComponent extends Component {
    render(props, state) {
        // props is the same as this.props
        // state is the same as this.state

        return <h1>Hello, {props.name}!</h1>;
    }
}

コンポーネントとその使用方法の詳細については、コンポーネントのドキュメントをご覧ください。

render()

render(virtualDom, containerNode, [replaceNode])

仮想DOM要素を親DOM要素containerNodeにレンダリングします。何も返しません。

// DOM tree before render:
// <div id="container"></div>

import { render } from 'preact';

const Foo = () => <div>foo</div>;

render(<Foo />, document.getElementById('container'));

// After render:
// <div id="container">
//  <div>foo</div>
// </div>

REPLで実行

オプションのreplaceNodeパラメータが指定されている場合、それはcontainerNodeの子である必要があります。レンダリングを開始する場所を推測する代わりに、Preactは差分アルゴリズムを使用して、渡された要素を更新または置換します。

⚠️ replaceNode引数は、Preact v11で削除されます。これは、Preactのソースコードの残りの部分で考慮する必要のあるエッジケースとバグが多すぎるためです。歴史的な理由からこのセクションを残していますが、3番目のreplaceNode引数を使用することはお勧めしません。

// DOM tree before render:
// <div id="container">
//   <div>bar</div>
//   <div id="target">foo</div>
// </div>

import { render } from 'preact';

const Foo = () => <div id="target">BAR</div>;

render(
  <Foo />,
  document.getElementById('container'),
  document.getElementById('target')
);

// After render:
// <div id="container">
//   <div>bar</div>
//   <div id="target">BAR</div>
// </div>

最初の引数は、コンポーネントまたは要素を表す有効な仮想DOM要素である必要があります。コンポーネントを渡す場合は、コンポーネントを直接呼び出すのではなく、Preactにインスタンス化させるようにすることが重要です。これは予期しない方法で壊れる可能性があります。

const App = () => <div>foo</div>;

// DON'T: Invoking components directly breaks hooks and update ordering:
render(App(), rootElement); // ERROR
render(App, rootElement); // ERROR

// DO: Passing components using h() or JSX allows Preact to render correctly:
render(h(App), rootElement); // success
render(<App />, rootElement); // success

hydrate()

アプリケーションをHTMLに事前にレンダリングまたはサーバーサイドレンダリングしている場合、Preactはブラウザでの読み込み時にほとんどのレンダリング作業をバイパスできます。これは、render()からhydrate()に切り替えることで有効にできます。これにより、イベントリスナーをアタッチし、コンポーネントツリーを設定しながら、ほとんどの差分処理がスキップされます。これは、事前レンダリングまたはサーバーサイドレンダリングと組み合わせて使用する場合にのみ機能します。

import { hydrate } from 'preact';

const Foo = () => <div>foo</div>;
hydrate(<Foo />, document.getElementById('container'));

REPLで実行

h() / createElement()

h(type, props, ...children)

指定されたpropsを持つ仮想DOM要素を返します。仮想DOM要素は、アプリケーションのUI階層内のノードの軽量な記述であり、本質的には{ type, props }の形式のオブジェクトです。

typeとpropsの後、残りのパラメータはすべてchildrenプロパティに収集されます。childrenは、次のいずれかになります。

スカラ値（文字列、数値、ブール値、null、未定義など）
ネストされた仮想DOM要素
上記の無限にネストされた配列

import { h } from 'preact';

h('div', { id: 'foo' }, 'Hello!');
// <div id="foo">Hello!</div>

h('div', { id: 'foo' }, 'Hello', null, ['Preact!']);
// <div id="foo">Hello Preact!</div>

h(
    'div',
    { id: 'foo' },
    h('span', null, 'Hello!')
);
// <div id="foo"><span>Hello!</span></div>

toChildArray

このヘルパー関数は、props.children値を、その構造やネストに関係なく、フラット化された配列に変換します。props.childrenがすでに配列の場合、コピーが返されます。この関数は、JSX内の静的式と動的式の特定の組み合わせで発生する可能性がある、props.childrenが配列でない場合がある場合に役立ちます。

単一の子を持つ仮想DOM要素の場合、props.childrenは子の参照です。複数の子がある場合、props.childrenは常に配列です。toChildArrayヘルパーは、すべての場合に一貫して処理する方法を提供します。

import { toChildArray } from 'preact';

function Foo(props) {
  const count = toChildArray(props.children).length;
  return <div>I have {count} children</div>;
}

// props.children is "bar"
render(
  <Foo>bar</Foo>,
  container
);

// props.children is [<p>A</p>, <p>B</p>]
render(
  <Foo>
    <p>A</p>
    <p>B</p>
  </Foo>,
  container
);

cloneElement

cloneElement(virtualElement, props, ...children)

この関数を使用すると、仮想DOM要素の浅いコピーを作成できます。これは通常、要素のpropsを追加または上書きするために使用されます。

function Linkout(props) {
  // add target="_blank" to the link:
  return cloneElement(props.children, { target: '_blank' });
}
render(<Linkout><a href="/">home</a></Linkout>);
// <a href="/" target="_blank">home</a>

createContext

コンテキストのドキュメントのセクションを参照してください。

createRef

要素またはコンポーネントがレンダリングされた後に参照する方法を提供します。

詳細については、参照のドキュメントを参照してください。

Fragment

子を持つことができる特別な種類のコンポーネントですが、DOM要素としてレンダリングされません。フラグメントを使用すると、DOMコンテナでラップする必要なく、複数の兄弟の子を返すことができます。

import { Fragment, render } from 'preact';

render(
  <Fragment>
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </Fragment>,
  document.getElementById('container')
);
// Renders:
// <div id="container>
//   <div>A</div>
//   <div>B</div>
//   <div>C</div>
// </div>

REPLで実行