React18についてキャッチアップしますか
yuki概要
reactについての記事を書くってことで悩んだ挙句、今更ながらReact18について調べてみようとはじまりました。
もう記事とかも色々出てるだろうけど、全く情報を仕入れてなかったので自分のキャッチアップ用にやっていきます。
yukiそもそも今のバージョンってなんだっけ？
ってことでVersionを確認 → React - Versions
2021/12/16時点では 17.0.2 が出てる。
で、とりあえずブログを見て色々呟いていこう。
yukiお知らせが3つあるとのこと。
- React18のリリースに向けて準備がスタート
- React18の新機能を段階的に導入するためにワーキンググループを作成
- フィードバックを送れるためにReact18のアルファ版を公開
これらのお知らせは、主にサードパーティのライブラリメンテナ向けです。ユーザ向けのアプリケーションを作成するために React を学んでいる、教えている、あるいは利用している方は、この投稿を無視していただいて問題ありません。もちろん興味があれば React 18 ワーキンググループでの議論をフォローすることは歓迎です！
ただ、引用にある感じだと無視していいってある。
一旦無視。
yukiReact18の新機能
React 18 のリリース時点で、自動で有効になるパフォーマンス改善（例：自動バッチング）、新たな API（例：startTransition）、そして React.lazy の組み込みサポートを有する新しいストリーミングサーバレンダラが含まれています。
和訳して読んでるけどわかりずらい。とりあえずリンクがあったやつ↓
- 自動バッチのリンク
- startTransitionのリンク
- ストリーミングサーバーレンダラのリンク
例としてこれらが追加されますよってことかと思うので、その他色々あるらしい。
「React18 新機能」でググってみる
React18 beta の新機能を紹介する【Automatic Batching （自動バッチ処理）編】 : ビジネスとIT活用に役立つ情報
↑一番上に出てきたこの記事によると、以下の内容が追加されるとのこと
- Concurrent Rendering（並行レンダリング）
- SSR support for Suspense（サスペンスの SSR サポート）
- Automatic Batching（自動バッチ処理）
- Selective hydration（選択的ハイドレーション）
- Built-in Cache（組み込みキャッシュ機構）
公式の例としてこれらがあるよってのと被ってるのは「自動バッチ」と「サスペンスの SSR サポート」かな。
startTransitionってのはどれかに当てはまってるのかな？よくわからん。
で続き読んでくと何か内容的にそんなに書いてない。リンクにある Discussion ってとこに色々書いてあるっぽい。
Discussions · reactwg/react-18
んー、英語で色々あるなー。。
公式ドキュメントがいいんだろうけど、一旦ググって出てきた記事たちを見て回ろう。
ってことで以下の記事を見てく。
yukiReact 18に備えるにはどうすればいいの？ 5分で理解する - Qiitaを読んでみる
- 2021/6にalpha版、2021/11にbeta版が登場
- Next.js 12でもReact 18のサポートが実験的機能として追加
- Server-Side Rendering (SSR) のストリーミングサポートって機能が追加される
- Next.js 12もReact18を通してストリーミングの恩恵を受けることができる
- NextではSSR Streamingと呼んでいる
- → Server-Side Streaming
- SSRがストリーミングをサポートすることで、従来のメリットを維持しつつパフォーマンス最適化技術を取り入れられる
- とまぁ色々あるがとにかくSuspenseを理解しろとのこと
- Suspenseのコンセプトさえを理解すれば、ストリーミングSSRやReact Server Componentsはその応用として理解することができる
Suspenseを理解する
ざっくり解釈
- 今までは例えばAPIからデータを取ってくるコンポーネントAがあったときに、そのコンポーネントAが何かしらのコンポーネントをレンダリングしてた（isLodingの状態だったらローディング中コンポーネントを表示する的な）
- ローディング中であってもレンダリングできないなんて状態はなかった
- Suspenseを使用するとローディング中と表示するコンポーネントは別の責務として考えることができるようになった
- ローディング中なのでローディング中コンポーネントを表示するってことはせずに「ローディング中なのでまだレンダリングできない」って状態にする（サスペンドすると言う）
- Suspenseコンポーネントはその状態のときにローディング中コンポーネントを表示する
- これによりコンポーネントAはローディング中に何をするのかを気にすることがなくなった
yuki続き
- 今までは isLoadingの状態を判定して処理していたので、手続き的なプログラミングとなっていたものが、Suspenseコンポーネントを使用することでより宣言的な方法となった
- Suspenseコンポーネントは複数のコンポーネントをまとめて検知したり、それぞれ別にすることで別のローディング中コンポーネント的なものを宣言できる
SuspenseとReact 18の関係
React 18のSSRストリーミングはSuspenseを前提にしています
ってことはSuspense自体はReact18の新機能ってことではないのか。
ちょっと寄り道してSuspenseについてちょっと調べてみる。
公式のこのページ↓をみると、React 16.6 で実験的に導入された機能のよう。
サスペンスを使ったデータ取得（実験的機能） – React
実験的に追加された機能として存在していたけど、React18の新機能で前提となる機能になった感じかな。
話を戻して、React18の新機能との関係について。
SSRのストリーミングは「初期状態（ローディング中でスケルトンとかが表示されている状態）を表すHTMLを最速で送り、その後データが揃ったらスケルトンを置き換えるHTML断片を追加で送る」という方式です。
SSRのストリーミングってのが新機能で、これは上記引用の通り。
ストリーミングってのは動画再生でダウンロードと再生を一緒に行うってので出てくるけど、それのHTML版ってことで必要な物だけ徐々に送信することで最速になるってことなのかな。
初期状態っていうのがSuspenseのfallbackで表示されている状態で、まずそのHTMLを送信して、データの取得が完了したら中身のコンポーネントで置き換えるHTMLが送信されるって流れっぽい。
その初期状態ってのを表すためにはSuspenseを使用するからSuspenseが前提となってるって機能の話か。
なんとなく新機能の「Server-Side Rendering (SSR) のストリーミングサポート」ってのは分かった。
既に存在していたSuspenseってものを使って、初期状態とデータが揃った後のレンダリングをストリーミングで行うことで最速にしようとしてるって認識
yukiReact 18 alpha版発表まとめを読んでみる
またまた uhyoさんの記事。毎度お世話になります。
むしろ先にこっちの記事読んだようが良かった感があるけどまぁいいや。
一旦何が追加されてるのかリスト化する
- Concurrent Rendering
- Automatic Batching
- SSR と Suspense（さっきやったやつかな）
- Suspense と HTML ストリーミング
- 選択的ハイドレーション
- ReactDOM.render に対する変更
- StrictMode での useEffect の挙動の変化
- Built-in Suspense Cache
最初に見た記事にあった機能と大体被ってるね。
React18 beta の新機能を紹介する【Automatic Batching （自動バッチ処理）編】 : ビジネスとIT活用に役立つ情報
- Concurrent Rendering（並行レンダリング）
- SSR support for Suspense（サスペンスの SSR サポート）
- Automatic Batching（自動バッチ処理）
- Selective hydration（選択的ハイドレーション）
- Built-in Cache（組み込みキャッシュ機構）
新機能とか挙動の変更とかも混ざってるからちょっと整理。
【新規機能】
- Concurrent Rendering（並行レンダリング）
- Automatic Batching（自動バッチ処理）
- SSR support for Suspense（サスペンスの SSR サポート）
- Selective hydration（選択的ハイドレーション）
- Built-in Cache（組み込みキャッシュ機構）
【既存機能の変更】
- ReactDOM.render に対する変更
- StrictMode での useEffect の挙動の変化
React18で何が起こるのか全く知らなかった状態から内容はともかく、追加されるものと変更されるものは認知できたかな。
リスト化してた記事を見てこうかと思ったけど、色々散らばりそうだから今出たのをもう一回0から調べてく。