Fast 3kB alternative to React with the same modern API

function Counter() {
  const [value, setValue] = useState(0);

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </>
  )
}

スポンサー

Preactの特徴

よりDOMに近い

Preact(プリアクト)はDOM上に薄い仮想DOMによる抽象化を提供します。ブラウザの安定した機能の上に構築され、素のイベントハンドラをそのまま使います。他のライブラリとの連携もスムーズに行えます。

Preactはトランスパイルなしで直接ブラウザで使用することができます。

サイズが小さい

ほとんどのUIフレームワークはアプリケーションを構成するJavaScriptのサイズの大部分を占めてしまうくらいの大きさです。 Preactは違います。あなたが書いたコードがアプリケーションの大部分を占めるようになるくらいの小ささです。

つまり、Preactはダウンロードしてパースして実行するJavaScriptが少ないので、実際のアプリケーションの処理により多くの時間を割くことができます。フレームワークと格闘することなく、あなたの望むユーザー体験を実現できます。

卓越したパフォーマンス

Preactが高速な理由は単にサイズだけではありません。 Preactはシンプルで安定した差分アルゴリズムの実装によって最も高速な仮想DOMライブラリの1つになりました。

私たちは、状態の更新を自動的にバッチにまとめて、Preactのパフォーマンスを極限までチューニングしています。また、Preactのパフォーマンスを最大限引き出せるようにプラウザの開発者とも密接に連携しています。

ポータブル & 組み込みやすい

Preactのサイズの小ささは、強力な仮想DOMコンポーネントの枠組みを新しい用途に広げることを可能にしました。

Preactを使うと複雑なインテグレーションなしで使用できるアプリケーションのパーツを実装できます。また、Preactをウィジェットに組み込む際はアプリケーション全体を構築する時と同じツールやテクニックを使用できます。

高い生産性

生産性を犠牲にすることなくアプリケーションを軽量化することができるので、Preactでの開発はより楽しいものになるでしょう。Preactを使うとすぐに生産性が上がります。以下のおまけの機能もあります。

props、state、contextが追加の引数としてrender()に渡されます。
classやforのような標準のHTML属性を使用できます。

エコシステムの互換性

仮想DOMコンポーネントは、ボタンからデータプロバイダまですべての再利用可能なコンポーネントの共有を簡単にします。 PreactはReactのエコシステムにある何千ものコンポーネントをシームレスに利用できるように設計されています。

React互換レイヤとしてバンドラにpreact/compatを加えるだけで、どんなに複雑なReactコンポーネントでもそのままアプリケーションに組み込むことができます。

動くものを見てみましょう。

Todoリスト

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.currentTarget.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <label>
                  <span>Add Todo</span>
                  <input value={text} onInput={this.setText} />
                </label>
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}

Run in REPL

実行結果

import TodoList from './todo-list';

render(<TodoList />, document.body);

GitHubのスター数を取得

export default class Stars extends Component {
    async componentDidMount() {
        let stars = await githubStars(this.props.repo);
        this.setState({ stars });
    }
    render({ repo }, { stars=0 }) {
        let url = `https://github.com/${repo}`;
        return (
            <a href={url} class="stars">
                ⭐️ {stars} Stars
            </a>
        );
    }
}

Run in REPL

実行結果

import Stars from './stars';

render(
    <Stars repo="preactjs/preact" />,
    document.body
);

⭐️ 37852 Stars

もっと詳しく知りたいですか？

Reactの経験の有無に応じてガイドを別けています。
あなたに合ったガイドを選びましょう。

はじめに Preactへ移行する