前書き
いつものように記事を読み漁っていると、
こちらの記事で、
Reactと一緒の構文で書ける Preactで記述することができる
という記述を見た。
Preactの存在を知らず、Reactとの違いが気になったので、わかる範囲で徹底的に調べてなるべくまとめてみる。
誰に向けて
- Reactのことをあんまり知らない&Preact初耳の人
- 自分自身
Preactを作った目的
これが一番知りたかったもの。
PreactがReactの機能をすべて含まない理由は小さい、集中した状態を保ちたいからです。
だそう。
言われてみれば、Reactのアイコンからふたつ円を取り除いたような、無駄を省いたような見た目をしている。
ではどんな違いがあるのか。
主な違い
PreactとReactの主な違いはPreactには合成イベント(Synthetic Event)がないことです。
Synthetic Eventが何かわからなかったので調べてみた。
こちらの記事がわかりやすかった。
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
記事によると、このeがSyntheticEvent(合成イベント)を表すらしい。
続けてこちらを読むと、
The way React deals with events is a bit different, and these differences can surprise you in various ways if you aren't paying close attention.
和訳すると、
Reactのeventsの扱いは少し異なり、この違いは注意を払わないとあらゆる方法でコーダーを驚かせるだろう。
と書いてあった。何とどう異なるのかが私の英語力では見つからなかったが、気を付けないとエラーが起きるぞ！ということだろう。
続いてわからなかった部分を調べてみた。
原因としてはReactのイベントはネイティブイベントではなく、
SyntheticEventと呼ばれるReact独自のラッパーイベントで実装されており、
そのためWebComponentとReactでイベントが伝達されず、イベントを発火することが出来ません。
WebComponentでReactのイベントを使おうとすると、React独自の合成イベントとネイティブイベントが衝突し、難しい、ということでしょうか。
さらにこの記事によると、
Reactのサブセットであるpreactを使って そもそもの原因を回避する方法です。
preactでは合成イベントは利用されていないためイベントハンドラは問題なく発火します。
とあった。
WebComponentを使うならPreactを使おう！
ただし、
preact自体 WebComponentに完全に対応されていません
だそう。
ここでさらにさらに、次の疑問が浮かんだ。
そもそも合成イベントは何のためにあるのか
Reactの公式ドキュメントを見返してみると、
イベントハンドラには、SyntheticEvent のインスタンスが渡されます。これはブラウザのネイティブイベントに対するクロスブラウザ版のラッパです。stopPropagation() と preventDefault() を含む、ブラウザのネイティブイベントと同じインターフェイスを持ちつつ、ブラウザ間で同じ挙動をするようになっています。
とあった。いまいち理解できないが、答えがありそう。
Reactとの互換性はあるのか
ほとんどの違いは些細なものか、preact/compatによって吸収されます。preact/compatはReactとの100%の互換性を目指している薄いレイヤーです。
だそう。
preact/compatについてはこちらの記事をご覧ください。というか、今回知りたかったことをこの記事が大体まとめてくれていました。
以上
ご覧いただきありがとうございました。
とりあえずWebComponentを使わない限りReactでいいのでしょうか。ご意見お待ちしております。