0514

LOGS

  • React Suspense の復習

    • https://ja.react.dev/reference/react/Suspense
    • fallback は React ノードであれば何でも受け付ける
      • 実際にはローディングスピナやスケルトンだろう
    • children がサスペンドしたら <Suspense> は fallback に切り替わる
      • fallback 自体がレンダー中にサスペンドしたら，親のサスペンスバウンダリのうち最も近いものがアクティブになる．なるほど．
    • 逆に，初回マウント前にレンダリングされた UI は消える．一切の state は保持しないから．

    • <Suspense> が再度サスペンドしたら，もちろん再度 fallback が表示される

      • children すべてのコードとデータが読み込まれるまで

      • ただし，それが startTransition または useDeferredValue によって引き起こされた場合は除く

        • startTransition
        • UI をブロックせずに state を更新できるもの
        • startTransition(scope) と書く
          • scope 最低１個 set() 関数を呼び出して state を更新する関数
            startTransition(() => {
  setHoge(nextHoge);
});
          • 要は useState といっしょに使うイメージ？
        • この更新はノンブロッキングになり，ローディングインジケーターは表示しない
        • トランジションが pending であるかどうかを知るための方法を提供しないのか…
          • 知りたいなら，代わりに useTransition が必要となる
          • scope は即座に実行されるので，非同期関数は渡せない
          • 他にも注意事項がたくさんあるのでドキュメントを見る
        • レスポンスなし

        • useDeferredValue UI の一部の更新を遅延させるための React フック

          • useDeferredValue(value, initialValue?) と書く ```js import { useState, useDeferredValue } from 'react';

          function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); // ... } ```

          • value 遅延させたい値．任意の型．
          • initialValue 名前の通り初期値
            • 省略すると，前のバージョンの value が存在しないので，遅延しない
          • 戻り値は更新後の値．初回は，与えた初期値がそのまま返ってくる
      • また, children のどれか１つでもデータ待ちでサスペンドしていたら fallback が表示され，すべてが揃ったら一斉にレンダリングされるとな
      • 他にも，いろんな非同期処理や状態ごとに見た目や処理を変えるケースが公式サイトに載っているので，都度必要に応じたら見るということで，一旦ここでストップ
  • ChatGPT 4o が出たので早速 p5.js のコードをいくつか書かせてみている *

results matching ""

    No results matching ""