Reactガイドを読んでいくその308
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
サスペンスを使ったデータ取得（実験的機能）
アプローチ 3: Render-as-You-Fetch（サスペンスを使用）
これまではsetStateを呼び出す前にデータの取得が必要だった。
サスペンスをつかうと、データ取得の開始後、取得完了を待たずにレンダーを開始することができる。
codesandbox.io サンプルを見ると確かに、完了を待たずに描画を開始している。
以下のような順番で処理が行われているらしい。
1.レンダー時点で fetchProfileData() を使ってリクエストがスタートしています。この関数は Promise ではなく特殊な “リソース (resource)” を返します。現実的な例では、Relay のようなデータ取得ライブラリのサスペンス連携機能を使うことになります。 2.React は <ProfilePage> のレンダーを試みます。子要素として <ProfileDetails> と <ProfileTimeline> が返ります。 3.React は <ProfileDetails> のレンダーを試みます。内部で resource.user.read() が呼び出されます。データはまだ何も取得されていないので、このコンポーネントは “サスペンド (suspend)” します。React はこのコンポーネントを飛ばして、ツリーの他のコンポーネントのレンダーを試みます。 4.React は <ProfileTimeline> のレンダーを試みます。内部で resource.posts.read() が呼び出されます。今回も、まだデータがありませんので、このコンポーネントは “サスペンド” します。React はこのコンポーネントも飛ばして、ツリーの他のコンポーネントのレンダーを試みます。 5.レンダーを試みるべき他のコンポーネントは残っていません。<ProfileDetails> がサスペンドしたので、React はツリーの直上にある <Suspense> フォールバックを表示します：<h1>Loading profile...</h1>。ひとまずこれで終わりです。
resource オブジェクトがいずれロードされるであろうデータを表す。
readを呼び出すとデータかコンポーネントがサスペンドされる。
今日はここまで。
Reactガイドを読んでいくその307
Reactガイドを読んでいくその306
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
サスペンスを使ったデータ取得（実験的機能）
アプローチ 1: Fetch-on-Render（サスペンス不使用）
現状Reactではeffectを使用してデータを取得する。
// In a function component:
useEffect(() => {
fetchSomething();
}, []);
// Or, in a class component:
componentDidMount() {
fetchSomething();
}
画面上にコンポーネントがレンダーされた後までデータ取得が始まらないので、このアプローチをfetch-on-renderと呼称している。
ウォーターフォールという問題を引き起こしてしまう。
レンダー時にデータを取得するコードではウォーターフォールはよく発生する。
修正することは可能とはいえ、プロダクトが成長するにつれて多くの人はこの問題を解決しづらくするような手法を使うようになる。
今日はここまで。
Jetson Nano 超入門 を読んだ
Jetson nano を始めて触るなんてときにものすごく丁寧にいろいろと説明してくれている一冊。
自分としては電源周りの部分の理解が深まったのでとてもよかった。
電子工作についても軽く触れられており、そのあたりに手を出してみたいとか考えている人にはとっつきやすいなと感じた。
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と深く連携できる
ロード中状態の表示を細かく設計することができる
競合状態を避ける手助けができる
今日はここまで。
