今後のフロントエンド開発で必須知識となるReact v18の機能を丁寧に理解する
2023/05/23
じゃけぇ
Udemy
テーマ範囲:
目次
セクション1:はじめに
セクション2:React18の破壊的変更
セクション3:AutomaticBatching
セクション4:Transition
セクション5:Suspenseその1
セクション6:Suspneseその2
セクション7:その他新しく追加されたHooks
セクション8:さいごに
セクション1:はじめに
セクション2:React18の破壊的変更
どうして、Reactコンポーネントは「最初に二回」マウントイベントが発生するの?
v18からそうなった。「ツリーから外したままコンポーネントを残しておき、後で再度マウント」が起こりうる。
将来、オフスクリーンに対応するため。
なので、マウントイベントが2回(N回)起きるのは「正しい」。それに耐えうる設計にすること。
結論:今後のReactはコンポーネントが「何度もマウント/アンマウントされ得るよ」
(一応、コンフィグで「17時代の動きにする」はできるけど、今後新しく作る時はそうはしないでね)
セクション3:Automatic Batching
Stateの更新によるコンポーネントの再レンダリング、をウラで「一回にまとめて」行う。
17以前は、バカ正直に毎回更新していた。
mandalin開発時、これ不思議な挙動で遭遇したわ。
flushSync() で、Automatic Batching 明示的に回避できる。
import {flushSync} from "react-dom"
なお、17でも「イベントハンドラ単位でバッチ対応はされていた」。
セクション4:Transition
Transition:遷移
コンポーネントの描画の際「急ぐもの」と「遅れて良いもの」を指定し、タイミングを住み分ける。
Chrome, "Performance Insights" から「CPUが遅い環境」をシミュレートできる!
import {startTransition} from "react"
code:js
startTransition(() => { 遅延しても良い処理 })
import {useTransition} from "react"
code:js
// トランジション処理中は isPending = true、 完了したら isPending = false
// このフラグが変更されると、再レンダリングされる
import {useDeferredValue} from "react"
code:js
let _list = useDefferedValue(list)
return(<>{_list}</>)
結論
「描画、遅れさせていいよ」という描画部分を指定できるようになった。
useDefferedValue を使うと、それが変数単位で指定できる。
セクション5:Suspenseその1
Suspense:Webアプリの「ファイル読み込み(=import)」を遅延可能にする機能。
ケース:
「Webアプリが重いファイルを読み込むが、そのファイルはアプリ序盤では使わない」場合
Suspenseを使わない場合:もったり読み込んでからアプリが起動。
Suspenseを使う場合:fallback表示(= Now loading ...)を表示しておける。
tanstack/react-query
WebAPIの取り扱いをラクにするラッパ。いいぞ!
axiosと組み合わせる。
QueryClient, QueryClientProvider
WebAPIアクセス(の呼び出し)を同期的に記述できる、結果が返ってきたら再レンダリンクできる。
Suspense導入
クエリライブラリ側(react-query)がSuspenseに対応している必要あり。
react-query は対応している
ErrorBoundary
import {ErrorBoundary} from 'react-error-boundary'
<ErrorBoundary fallback={<p>Error!</p>}> で囲うことで、エラー時の処理を記述が可能
Google Core Web Vital : Googleによるサイト評価指標
レイアウトシフト:リソースの読み込みが遅く、後で画像が表示されて表示がズレる事象
セクション6:Suspneseその2
ConcurrentRenderer
並行レンダラ
=v18から、レンダリングを並行処理できるようになった!ということ(マルチスレッド的なイメージ)
Hydration ハイドレーション
レンダリングの種類(Next.js)
CSR:クライアントサイドレンダリング
https://scrapbox.io/files/646cab84557b8a001ce0c618.png
SSR:サーバーサイドレンダリング
https://scrapbox.io/files/646cabbda41901001bd3daee.png
SSG:静的サイトジェネレーション
ISR:インクリメンタルスタティックリジェネレーション
StreamingHTML
SSRの派生。ページの部品(=HTML)をサーバに生成させ、出来た順に取得し画面に表示する。
手法としてSuspenseが使える。
ハイドレーション
HTML_DOMの各要素とJSイベントを紐づけていく作業のこと。
セクション7:その他新しく追加されたHooks
セクション8:さいごに
読んでみて
これで「1年前の最新情報には追いついた!」が言えるようになった
現場仕事には十分かな。
Atomic Batching、Transition、Suspnece、Error Boundering は即で使える部品。うれしい。
最後の CSR、SSR、StreamingHTML、Hydration は、まだピンとこない
概念は、理解。
いつ、どういうサービスで必要となる?
必要となったら「Railsに組み込んで使うReact」ではイカンな。Next.jsにしなければ。
Reactの日本語ドキュメント、内容、意味、けっこう分かる。
日本語ドキュメントが整備されているなんて素晴らしい!
それでも「もう一人の誰か」と解釈を話せるのは、とても価値がある。1,500円なんて安いもの。