Edit this Page

APIリファレンス

このページはPreactで提供されているすべての関数の概要を記載します。

Component

ComponentはステートフルなPreactコンポーネントを作成するために拡張して使用するベースクラスです。 コンポーネントは直接インスタンス化するのではなく、レンダラーによって管理され必要に応じて生成されます。

import { Component } from 'preact';

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

Component.render(props, state)

すべてのコンポーネントはrender()関数を持つ必要があります。render()はコンポーネントの現在のporpsとstateが渡されます。そして、仮想DOM要素、配列、nullを返す必要があります。

import { Component } from 'preact';

class MyComponent extends Component {
	render(props, state) {
		// propsはthis.propsと同じ
		// stateはthis.stateと同じ

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

コンポーネントとその使い方を詳しく知りたい場合はコンポーネントのドキュメントをチェックしてください。

render()

render(virtualDom, containerNode, [replaceNode])

仮想DOM要素を親DOM要素であるcontainerNode内にレンダリングします。戻り値はありません。

// DOMツリーがレンダリングされる前
// <div id="container"></div>

import { render } from 'preact';

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

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

// レンダリングされた後
// <div id="container">
//  <div>foo</div>
// </div>

オプションのreplaceNodeパラメータ指定する場合は、containerNodeの子要素でなければなりません。 レンダリングの開始地点を推測する代わりに、Preactは差分アルゴリズムを使用して渡された要素(replaceNode)を更新または置換します。 詳しくはrender()は常にコンテナ内にレンダリングした要素を上書きするを確認してください。

// DOMツリーがレンダリングされる前
// <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')
);

// レンダリングされた後
// <div id="container">
//   <div>bar</div>
//   <div id="target">BAR</div>
// </div>

第1引数は仮想DOMでなければなりません。その仮想DOMはコンポーネントもしくはHTML要素を表す必要があります。 コンポーネントを渡す際は以下のように直接インスタンス化するのではなく必ずPreactにインスタンス化を任せてください。直接インスタンス化すると予期しない方法で止まります。

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

// コンポーネントを直接指定することはフックと更新順序を破壊するのでしないでください。
render(App(), rootElement); // エラー
render(App, rootElement); // エラー

// コンポーネントをh()もしくはJSXで渡すと正常に動作します。
render(h(App), rootElement); // 成功
render(<App />, rootElement); // 成功

hydrate()

プリレンダリングもしくはサーバサイドレンダリングによって既にアプリケーションをHTMLに出力している場合、ブラウザでのロード時にほとんどのレンダリング処理をバイパスします。 これはrender()をhydrate()に置き換えることで有効になります。これは大半の差分処理を省略しつつ、イベントリスナをセットしコンポーネントツリーを構築します。 これはプリレンダリングもしくはサーバサイドレンダリングと連携した場合のみ動作します。

import { hydrate } from 'preact';

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

h() / createElement()

h(type, props, ...children)

与えられたpropsを持つ仮想DOM要素を返します。 仮想DOM要素はアプリケーションのUIの階層構造に所属するノードを表す軽量なデータです。 仮想DOM要素の実態は基本的には{ type, props }という形式のオブジェクトです。

typeとpropsを除く残りのパラメーターは配列であるchildrenに格納されます。 typeとpropsを除く残りの引数は、仮想DOM要素のchildrenプロパティに格納されます。 childrenは次のどれかです。

  • スカラー値 (string、number、boolean、null、undefined等)
  • ネストされた仮想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が既に配列の場合、コピーを返します。 この関数はprops.childrenが必ず配列とは限らない場合に役に立ちます。それはJSXの静的な処理と動的な処理の組み合わせで発生することがあります。

仮想DOM要素が子要素を1つ持つ場合、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は"bar"
render(
  <Foo>bar</Foo>,
  container
);

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

cloneElement

cloneElement(virtualElement, props, ...children)

この関数は仮想DOM要素の浅い(shallow)コピーを作成します。 要素のpropsを追加する際や上書きする際によく使用します。

function Linkout(props) {
  // target="_blank"をリンクに追加
  return cloneElement(props.children, { target: '_blank' });
}
render(<Linkout><a href="/">home</a></Linkout>);
// <a href="/" target="_blank">home</a>

createContext

Context documentationのcreateContextの項目を見てください。

createRef

レンダリングで生成されたコンポーネントや要素の参照を取得する際に使用します。

詳細はリファレンスのドキュメントを見てください。

Fragment

子要素を持つことができるが、DOM要素としてレンダリングされない特殊なコンポーネントです。 FragmentはDOMコンテナーのラップなしで兄弟関係にある複数の子要素を返すことを可能にします。

import { Fragment, render } from 'preact';

render(
  <Fragment>
    <div>A</div>
    <div>B</div>
    <div>C</div>
  </Fragment>,
  document.getElementById('container')
);
// レンダリングした結果
// <div id="container>
//   <div>A</div>
//   <div>B</div>
//   <div>C</div>
// </div>

Built by a bunch of lovely people ubitools.com