Preact とかいう React のサブセット。何が違うのか

React よりもファイルサイズが小さいと謳っている Preact。

Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

React と同じ ES6 の API で 3kb と軽量だし高速だぜ！　とのこと。

で、本家 React と何が違うのか。Preact のドキュメント に React との違いが説明してあったので、Google 翻訳に突っ込んで雑に整形した。

以下、その文章。雑すぎ注意。

React との違い

Preact 自体は、React の再実装ではありません。違いがあります。これらの相違点の多くは些細なものです。React と100％の互換性を達成しようとする薄いレイヤーである preact-compat を併用することで、相違を完全に除去することができます。

Preact が React のすべての機能を含むことを試みていないのは、軽量と集中のためです。そうでなければ、すでに非常に複雑でよく構築されたコードベースである React プロジェクトに最適化を提出する方が理にかなっています。

バージョン互換性

Preact と preact-compat の両方について、バージョンの互換性は、React の現在および以前のメジャーリリースに対して測定されます。 React チームによって新機能が発表されると、Project Goals の意味では、それらの機能が Preact のコアに追加される可能性があります。 これはかなり民主主義的なプロセスであり、議論や意思決定を通じて常に進化しています。

したがって、ウェブサイトとドキュメンテーションは、互換性や比較を論じるときに、React 0.14.x と 15.x を反映しています。

何が含まれているか

  • ES6 Class Components
    • クラスはステートフルなコンポーネントを定義する表現力のある方法を提供します
  • High-Order Components
  • ステートレスな Pure Functional Components
    • props を引数として受け取って JSX/VDOM を返す関数
  • Contexts: context は Preact 3.0 以降でサポート
    • Context は実験的な React 機能ですが、一部のライブラリで採用されている
  • Refs: Preact 4.0 に関数リファレンスのサポートが追加され、文字列の参照は preact-compat でサポートされている
    • Refs は、レンダリングされた要素と子要素を参照する方法を提供します。
  • Virtual DOM Diffing
    • 与えられたもの。Preact の diff はシンプルですが効果的で、非常に高速です。
  • h(), React.createElement のより一般的なバージョン
    • この考えはもともとハイパースクリプトと呼ばれ、 React エコシステムをはるかに上回る価値があるため、Preact は元の標準を推進しています。
    • 多少可読性が高くなります h('a', { href:'/' }, h('span', null, 'Home'))

何が追加されているか

Preact は実際に React コミュニティの仕事に影響を受けた便利な機能をいくつか追加しています

  • this.props と this.state が render() に渡されます
    • 手動でも参照することはできますが、こちらのほうが destructuring するときによりきれいです
  • 制御された setTimeout（1） を使用してDOM更新の一括処理（requestAnimationFrameも使用可能）
  • CSSクラスのためにclassを使うことができます。 classNameは引き続きサポートされますが、classが推奨です。
  • コンポーネントと要素のリサイクル／プーリング

何がなくなっているか

  • PropType バリデーション。全員が PropType を使用するわけではないので、Preact のコアの一部ではありません。
    • PropType は preact-compat で完全にサポートされているので、手動で使用できます。
  • Children: Preact では必要ありません。 props.children は常に配列なので。
    • React.Children は preact-compat で完全にサポートされています
  • 合成イベント：Preactのブラウザサポートターゲットは、この余分のオーバーヘッドを必要としません。
    • Preactは、イベント処理のためにブラウザのネイティブaddEventListenerを使用します。 DOMイベントハンドラの完全なリストについては、GlobalEventHandlersを参照してください。
    • 完全なイベントの実装は、より多くのメンテナンスとパフォーマンスの問題を意味し、APIが大きくなります

何が違うのか

Preact と React には若干の微妙な違いがあります。

  • render() が第三引数を取ります。ルートノードを置換するためです。第三引数を与えなければ、単に追加します。将来のバージョンでわずかに変更されるかもしれません。ルートノードを調べることによって置換レンダリングが適切かどうかを自動検知するようになるかもしれません。
  • コンポーネントは contextTypes や childContextTypes を実装しません。子要素は、 getChildContext（） から描画されたすべての context エントリを受け取ります。