Reactガイドを読んでいくその302
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
サスペンスを使ったデータ取得（実験的機能）
React 16.6 で追加されたコードのロードを待機してロード中状態を指定できるSuspenseコンポーネントが追加された。
const ProfilePage = React.lazy(() => import('./ProfilePage')); // Lazy-loaded
// Show a spinner while the profile is loading
<Suspense fallback={<Spinner />}>
<ProfilePage />
</Suspense>
データ取得用のサスペンスはデータ含むその他あらゆるものを宣言的に待機させることが可能。
明日からはサスペンスとは何かから見ていきます。
今日はここまで。
Reactガイドを読んでいくその301
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
研究からプロダクトへ
並列モードは以下を目標に掲げているらしい。
目標は、人間・コンピュータ間の相互作用に関する研究から得られた知見を現実の UI に取り込むことです。
Reactを使ったよりよいユーザ体験を作るために研究からプロダクトへ取り組みを続けてきたということらしい。
UI研究などにも使ってもらいたいのだとか。
なるほど。
次はサスペンスを使ったデータ取得（実験的機能）を見ていきます。
今日はここまで。
Reactガイドを読んでいくその300
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
並列モードの導入（実験的機能）
並列性
これまでの2つの例から統合の仕方を見ていく。
並列モードではReactは複数の状態の更新を同時に行うことができる。
CPUバウンドな更新の場合並列化は緊急性の高い更新のためにすでに実施中のレンダーを中断できる
IOバウンドな更新の場合並列化は全データが到着する前にReactがメモリ内でレンダーを始められ、空のロード画面を表示しなくて済む
Reactの使い方は変わらず、ほぼ同様にすべて機能することが並列のいいところ。
ユーザ体験の向上のために並列化を検討するのもありかと思われる。
今日はここまで。
Reactガイドを読んでいくその299
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
並列モードの導入（実験的機能）
計画的なローディングシーケンス
ブランチの作業は短期的なものもそうだけど、時間をかけて十分になるまで維持することもある。
それと同様に並列モードのレンダーもいい感じにできるようになっている。
アプリケーションの２つの画面を遷移していることを考えるとき、新しい画面にはまだ十分でなかった場合、体験としてよくないものになる。
Reactが旧画面にとどまることで、新画面の表示を待つことができれば体験の向上につなげることができる。
やろうと思えばこのハンドリングは今も可能ではあるが、並列モードはより簡単にできるようになっている。
今日はここまで。
Reactガイドを読んでいくその298
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
並列モードの導入（実験的機能）
中断可能なレンダリング
フィルタ出来るリストがあった場合、リストのフィルタにタイピングをしようとすると、
都度検索が走って引っ掛かりのような感覚があったりする。
DOMノードを作成してレイアウトを行うといった作業は必須だが、いつどのようにやるかは重要な要素になる。
回避策としてよくあるのはデバウンスを使うこと。
ただ、それを行うとタイピングをユーザが辞めた時に初めてリストの更新をする。
それでもやはり引っ掛かりを感じてしまう。
原因はシンプルで、レンダーが始まると中断できないため。
並列モードはレンダーが中断可能になるので、制限がなくなる。
ユーザの入力をさせつつ、更新後リストのレンダーをメモリ内で継続することができる。
こういったユーザ体験の向上に並列モードは大いに役立つ。
今日はここまで。
