Reactがフロントエンドの「メインボーイング」である場合、 Preact 常に彼の超軽量スポーツ機でした。そして今、 Preact 11 Beta そして、Hydration 2.0、Refサポート、レガシーの廃止など、本当に新しいラウンドがあります。これが何を意味するのか、簡単に見てみましょう。
Hydration 2.0 — 開始時にもうお粥はありません
Hydrationは、サーバーからのHTMLがブラウザで動き出し、インタラクティブなアプリケーションになる瞬間です。Reactと古いPreactでは、ノードの重複、ロード時の奇妙な「引きつけ」などのバグが発生することがありました。
現在：
アルゴリズムはよりスマートで高速になりました。
HTMLとクライアントの状態の一致は、驚きなしに動作します。
SSRアプリケーションは、まるでバターUIを手にしているかのようにスムーズにロードされます🧈。
結果: バグが少なく、不具合が少なく、First Paintが速くなります。
Refサポート—ついに！
Preactは常にReactエコシステムとの互換性を誇っていましたが、何かが欠けていました。今では次のように書くことができます。
import { useRef } from 'preact/hooks';
function App() {
const inputRef = useRef();
return <input ref={inputRef} placeholder="Write something" />;
}Refは回避策ではなく、実際に機能します。つまり、Reactからのコードの移植がさらに簡単になりました。
レガシーにさよなら
新しいバージョンでは、Preactチームは古い疑わしいコードの一部を削除することにしました。
古いAPIとの下位互換性を維持していたハキを削除しました。
内部をクリーンアップしました。慣習やサプライズが少なくなりました。
コードはよりコンパクトで高速になりました。
結果: ゴミを減らすことで、未来をよりクリーンに。
React vs Preact 11
従来のReactと新しいPreact 11 Betaの違いは次のとおりです。
基準 | React | Preact 11 Beta |
|---|---|---|
バンドルサイズ | ~40+ KB gzip | 〜3 KB gzip |
Hydration | クラシック、グリッチが発生する可能性あり | Hydration 2.0、より安定してより速く |
Refs | フルサポート | 新しくサポートされました（新機能🎉） |
エコシステムの互換性 | 100%（Reactエコシステム） | 非常に高い、現在は1:1に近い |
レガシー | 多くの下位互換性 | 古いコードを削除し、コードベースをよりクリーンにしました |
開発者にとって重要な点
もしあなたが SSR または ISR — Hydration 2.0 は、品質を大幅に向上させます。
使用する場合 Reactのライブラリ — Refのサポートが痛みを和らげます。
ご希望の場合 最小バンドル そしてスピード—Preactはチャンピオンのままです。
B コディケ 私たちは常にこのようなアップデートをフォローしています。私たちのモットーは、複雑なものを簡単な言葉で説明することです。誰もが余計なストレスを感じることなく、現代のフレームワークに慣れることができるようにすることです。
アプリにはJavaScriptとフロントエンドのコースがあり、 Telegramチャンネル Preact 11 Betaのようなニュースについて話し合っています。
📲 参加する そして、私たちと一緒にレベルアップしましょう！