Reactガイドを読んでいくその305
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
サスペンスを使ったデータ取得（実験的機能）
既存アプローチ vs サスペンス
Fetch-on-render：コンポーネントのレンダーを開始する。
Fetch-then-render：次の画面のためのデータの取得をできるだけ早く開始する。
Render-as-you-fetch：次の画面のためのデータ取得をできるだけ早く開始、直後にネットワークのレスポンスが得られる前に、新しい画面のレンダーを開始する。
明日からは一つずつ見ていきます。
今日はここまで。
Reactガイドを読んでいくその304
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
サスペンスを使ったデータ取得（実験的機能）
現環境でのサスペンスの使用
FacebookではRelay のサスペンス連携機能のみすでに利用しているらしい。
Relay を使ってない場合はもう少しプロジェクトに入れるのは待った方がいいんだとか。
実績が乏しいということなんだと思う。
ライブラリ作者でも同じで、待っていた方が無難そう。
サスペンスはコンポーネントがレンダーされてからデータ取得を開始するための方法であることを意図していません。そうではなく、既に取得されつつあるデータに対して、コンポーネントがそれを「待機」中であると宣言できるようにします。
を理解していてほしいとのこと。
今日はここまで。
Reactガイドを読んでいくその303
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
サスペンスを使ったデータ取得（実験的機能）
そもそもサスペンスとは何なのか？
昨日も触れたようにサスペンスはレンダー可能になる前にコンポーネントが何かを待機できるようにすることができる。
const resource = fetchProfileData();
function ProfilePage() {
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
<Suspense fallback={<h1>Loading posts...</h1>}>
<ProfileTimeline />
</Suspense>
</Suspense>
);
}
function ProfileDetails() {
// Try to read user info, although it might not have loaded yet
const user = resource.user.read();
return <h1>{user.name}</h1>;
}
function ProfileTimeline() {
// Try to read posts, although they might not have loaded yet
const posts = resource.posts.read();
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.text}</li>
))}
</ul>
);
}
サスペンスは何でないのか
データ取得実装ではない。
すぐに使えるクライアントではない
データ取得をビューレイヤと密結合させない
サスペンスは何ができるのか
データ取得ライブラリがReactと深く連携できる
ロード中状態の表示を細かく設計することができる
競合状態を避ける手助けができる
今日はここまで。
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が旧画面にとどまることで、新画面の表示を待つことができれば体験の向上につなげることができる。
やろうと思えばこのハンドリングは今も可能ではあるが、並列モードはより簡単にできるようになっている。
今日はここまで。
