Reactのコンカレントモード：Webアプリケーションをデバイスとインターネット速度に適合させる

この記事では、Reactのコンカレントモードを紹介します。それが何であるかを理解しましょう：機能とは何か、新しいツールが登場したこと、そしてすべてがユーザーのために飛ぶことができるように彼らの助けを借りてWebアプリケーションの操作を最適化する方法。コンカレントモードはReactの新機能です。そのタスクは、アプリケーションをさまざまなデバイスとネットワーク速度に適応させることです。これまでのところ、同時モードはライブラリの開発者が変更できる実験です。つまり、安定版には新しいツールはありません。私はあなたに警告しました、そして今行きましょう。



現在、レンダリングコンポーネントには、プロセッサパワーとネットワークデータ転送速度の2つの制限があります。ユーザーに何かを表示する必要がある場合は常に、現在のバージョンのReactは各コンポーネントを最初から最後までレンダリングしようとします。インターフェイスが数秒間フリーズするかどうかは関係ありません。データ転送についても同じです。Reactは、コンポーネントを1つずつ描画するのではなく、コンポーネントが必要とするすべてのデータを完全に待機します。







競争体制はこれらの問題を解決します。これを使用すると、Reactは、以前にブロックしていた操作を一時停止、優先順位付け、さらには元に戻すことができるため、同時モードでは、すべてのデータが受信されたか、その一部のみが受信されたかに関係なく、コンポーネントのレンダリングを開始できます。

コンカレントモードはファイバーアーキテクチャです

競争モードは、開発者が突然追加することを決定した新しいものではなく、すべてがそこで機能しました。事前にリリースの準備をしました。バージョン16では、Reactエンジンはファイバーアーキテクチャに切り替えられました。これは、原則として、オペレーティングシステムのタスクスケジューラに似ています。スケジューラは、プロセス間で計算リソースを分散します。いつでも切り替えることができるため、ユーザーはプロセスが並行して実行されているように見えます。



ファイバーアーキテクチャも同じですが、コンポーネントがあります。すでにReactにあるという事実にもかかわらず、Fiberアーキテクチャは中断されたアニメーションになっているようで、その機能を最大限に活用していません。競合モードでは、フルパワーでオンになります。



通常モードでコンポーネントを更新するときは、画面にまったく新しいフレームを描画する必要があります。更新が完了するまで、ユーザーには何も表示されません。この場合、Reactは同期して動作します。ファイバーは異なる概念を使用しています。16ミリ秒ごとに割り込みとチェックがあります：仮想ツリーが変更されましたか、新しいデータが表示されましたか？もしそうなら、ユーザーはすぐにそれらを見るでしょう。



なぜ16ms？React開発者は、毎秒60フレームに近い速度で画面を再描画しようと努めています。60の更新を1000msに収めるには、約16msごとに更新を行う必要があります。したがって、図。競争モードは箱から出して、フロントエンドの生活をより良くする新しいツールを追加します。それぞれについて詳しく説明します。

サスペンス

サスペンスは、コンポーネントを動的にロードするメカニズムとしてReact16.6で導入されました。コンカレントモードでは、このロジックは保持されますが、追加の機会が表示されます。サスペンスは、データロードライブラリと連携して機能するメカニズムになります。ライブラリを介して特別なリソースを要求し、そこからデータを読み取ります。



サスペンスは、まだ準備ができていないデータを同時に読み取ります。どうやって？私たちはデータを要求し、それらが完全になるまで、私たちはすでにそれらを小さな断片で読み始めています。開発者にとって最もクールなことは、ロードされたデータが表示される順序を管理することです。サスペンスを使用すると、ページコンポーネントを同時に、または互いに独立して表示できます。これにより、コードが簡単になります。Suspense構造を調べて、データが要求されている順序を確認するだけです。



「古い」Reactでページをロードするための一般的なソリューションは、Fetch-On-Renderです。この場合、useEffectまたはcomponentDidMount内でレンダリングした後にデータを要求します。これは、Reduxまたは他のデータレイヤーがない場合の標準ロジックです。たとえば、2つのコンポーネントを描画し、それぞれにデータが必要です。

• コンポーネントリクエスト1
• 期待…
• データの取得->コンポーネント1のレンダリング
• コンポーネントリクエスト2
• 期待…
• データの取得->コンポーネント2のレンダリング

このアプローチでは、最初のコンポーネントがレンダリングされた後にのみ、次のコンポーネントが要求されます。長くて不便です。



別の方法、Fetch-Then-Renderについて考えてみましょう。最初にすべてのデータを要求し、次にページをレンダリングします。

• コンポーネントリクエスト1
• コンポーネントリクエスト2
• 期待…
• コンポーネント1の取得
• コンポーネント2の入手
• コンポーネントのレンダリング

この場合、リクエストの状態を上に移動します。データを処理するために、リクエストをライブラリに委任します。この方法はうまく機能しますが、微妙な違いがあります。コンポーネントの1つが他のコンポーネントよりもロードに時間がかかる場合、ユーザーには何も表示されませんが、すでに何かを表示することはできます。ユーザーと投稿の2つのコンポーネントを含むデモのサンプルコードを見てみましょう。コンポーネントをサスペンスでラップします。

const resource = fetchData() // -    React
function Page({ resource }) {
    return (
        <Suspense fallback={<h1>Loading user...</h1>}>
            <User resource={resource} />
            <Suspense fallback={<h1>Loading posts...</h1>}>
                <Posts resource={resource} />
            </Suspense>
        </Suspense>
    )
}

最初のコンポーネントをレンダリングした後にデータを要求したとき、このアプローチはFetch-On-Renderに近いように見えるかもしれません。しかし実際には、Suspenseを使用するとデータをはるかに高速に取得できます。これは、両方の要求が並行して送信されるためです。



Suspenseでは、フォールバック、表示するコンポーネントを指定し、コンポーネント内のデータ取得ライブラリによって実装されたリソースを渡すことができます。そのまま使用します。コンポーネント内で、リソースからデータを要求し、readメソッドを呼び出します。これは、図書館が私たちに約束することです。 Suspenseは、データがロードされているかどうかを理解し、ロードされている場合はそれを表示します。



コンポーネントは、まだ受信中のデータを読み取ろうとしていることに注意してください。

function User() {
    const user = resource.user.read()
    return <h1>{user.name}</h1>
}
function Posts() {
    const posts = resource.posts.read()
    return //  
}

Dan Abramovの現在のデモでは、そのようなものがリソースのスタブとして使用されています。

read() {
    if (status === 'pending') {
        throw suspender
    } else if (status === 'error') {
        throw result
    } else if (status === 'success') {
        return result
    }
}

リソースがまだロードされている場合は、例外としてPromiseオブジェクトをスローします。サスペンスはこの例外をキャッチし、それがプロミスであることを認識して、ロードを続行します。 Promiseの代わりに、他のオブジェクトの例外が到着した場合、要求がエラーで終了したことが明らかになります。完成した結果が返されると、サスペンスはそれを表示します。リソースを取得し、そのリソースでメソッドを呼び出すことが重要です。内部でどのように実装するかは、ライブラリ開発者の決定です。主なことは、Suspenseがその実装を理解していることです。



いつデータをリクエストしますか？ツリーの一番上で質問することは、必須ではない可能性があるため、お勧めできません。より良いオプションは、イベントハンドラー内をナビゲートするときにこれをすぐに行うことです。たとえば、フックを介して初期状態を取得し、ユーザーがボタンをクリックするとすぐにリソースを要求します。



コードでは次のようになります。

function App() {
    const [resource, setResource] = useState(initialResource)
    return (
        <>
            <Button text='' onClick={() => {
                setResource(fetchData())
            }}>
            <Page resource={resource} />
        </>
    );
}

サスペンスは非常に柔軟です。コンポーネントを次々に表示するために使用できます。

return (
    <Suspense fallback={<h1>Loading user...</h1>}>
        <User />
        <Suspense fallback={<h1>Loading posts...</h1>}>
            <Posts />
        </Suspense>
    </Suspense>
)

または同時に、両方のコンポーネントを1つのサスペンスにラップする必要があります。

return (
    <Suspense fallback={<h1>Loading user and posts...</h1>}>
        <User />
        <Posts />
    </Suspense>
)

または、コンポーネントを独立したサスペンスでラップして、コンポーネントを互いに別々にロードします。リソースはライブラリを介してロードされます。とてもかっこよくて便利です。

return (
    <>
        <Suspense fallback={<h1>Loading user...</h1>}>
            <User />
        </Suspense>
        <Suspense fallback={<h1>Loading posts...</h1>}>
            <Posts />
        </Suspense>
    </>
)

さらに、エラー境界コンポーネントはサスペンス内のエラーをキャッチします。何か問題が発生した場合、ユーザーがロードしたことを示すことができますが、投稿はロードされていないため、エラーが発生します。

return (
    <Suspense fallback={<h1>Loading user...</h1>}>
        <User resource={resource} />
        <ErrorBoundary fallback={<h2>Could not fetch posts</h2>}>
            <Suspense fallback={<h1>Loading posts...</h1>}>
                <Posts resource={resource} />
            </Suspense>
        </ErrorBoundary>
    </Suspense>
)

それでは、競争体制のメリットを完全に引き出すことができる他のツールを見てみましょう。

SuspenseList

SuspenseListは、Suspenseのロード順序の制御を同時に支援します。複数のサスペンスを厳密に次々にロードする必要がある場合は、それらを相互にネストする必要があります。

return (
    <Suspense fallback={<h1>Loading user...</h1>}>
        <User />
        <Suspense fallback={<h1>Loading posts...</h1>}>
            <Posts />
            <Suspense fallback={<h1>Loading facts...</h1>}>
                <Facts />
            </Suspense>
        </Suspense>
    </Suspense>
)

SuspenseListを使用すると、これがはるかに簡単になります。

return (
    <SuspenseList revealOrder="forwards" tail="collapsed">
        <Suspense fallback={<h1>Loading posts...</h1>}>
            <Posts />
        </Suspense>
        <Suspense fallback={<h1>Loading facts...</h1>}>
            <Facts />
        </Suspense>
    </Suspense>
)

SuspenseListの柔軟性は驚くべきものです。ウィジェットやその他のコンポーネントを表示するのに便利なため、SuspenseListを好きなようにネストし、内部の読み込み順序をカスタマイズできます。

useTransition

コンポーネントの更新を完全に準備ができるまで延期し、中間のロード状態を削除する特別なフック。それは何のため？ Reactは、状態を変更するときにできるだけ速く移行するように努めています。ただし、時間をかけることが重要な場合もあります。データの一部がユーザーアクションでロードされる場合、通常、ロード時にローダーまたはスケルトンが表示されます。データが非常に早く到着した場合、ローダーは半回転でも完了する時間がありません。点滅してから消え、更新されたコンポーネントを描画します。このような場合は、ローダーをまったく表示しない方が賢明です。



これがuseTransitionの出番です。コードではどのように機能しますか？ useTransitionフックを呼び出し、タイムアウトをミリ秒単位で指定します。指定された時間内にデータが届かない場合でも、ローダーが表示されます。しかし、それらをより速く取得すると、即座に移行します。

function App() {
    const [resource, setResource] = useState(initialResource)
    const [startTransition, isPending] = useTransition({ timeoutMs: 2000 })
    return <>
        <Button text='' disabled={isPending} onClick={() => {
            startTransition(() => {
                setResource(fetchData())
            })
        }}>
        <Page resource={resource} />
    </>
}

ページに移動したときにローダーを表示したくない場合もありますが、それでもインターフェイスで何かを変更する必要があります。たとえば、トランジションの間、ボタンをブロックします。次に、isPendingプロパティが役立ちます。これにより、移行段階にあることが通知されます。ユーザーにとって、更新は即座に行われますが、useTransitionマジックは、Suspenseでラップされたコンポーネントにのみ影響することに注意してください。UseTransition自体は機能しません。



遷移はインターフェイスで一般的です。移行を担当するロジックは、ボタンに縫い付けてライブラリに統合するのに最適です。ページ間の遷移を担当するコンポーネントがある場合は、onClickをhandleClickでラップします。これは、小道具を介してボタンに渡され、isDisabled状態を表示します。

function Button({ text, onClick }) {
    const [startTransition, isPending] = useTransition({ timeoutMs: 2000 })

    function handleClick() {
        startTransition(() => {
            onClick()
        })
    }

    return <button onClick={handleClick} disabled={isPending}>text</button>
}

useDeferredValue

したがって、遷移を行うコンポーネントがあります。次の状況が発生することがあります。ユーザーが別のページに移動したい場合、データの一部を受け取り、表示する準備ができています。同時に、ページは互いにわずかに異なります。この場合、他のすべてがロードされるまで、ユーザーに古いデータを表示するのが論理的です。



現在、Reactはこれを行うことができません。現在のバージョンでは、現在の状態のデータのみをユーザーの画面に表示できます。ただし、コンカレントモードのuseDeferredValueは、値の遅延バージョンを返し、ローダーの点滅や起動時のフォールバックの代わりに古いデータを表示する可能性があります。このフックは、遅延バージョンが必要な値とミリ秒単位の遅延を取ります。



インターフェースは非常に流動的になります。最小限のデータで更新を行うことができ、その他はすべて徐々に読み込まれます。ユーザーは、アプリケーションが高速でスムーズであるという印象を受けます。実際には、useDeferredValueは次のようになります。

function Page({ resource }) {
    const deferredResource = useDeferredValue(resource, { timeoutMs: 1000 })
    const isDeferred = resource !== deferredResource;
    return (
        <Suspense fallback={<h1>Loading user...</h1>}>
            <User resource={resource} />
            <Suspense fallback={<h1>Loading posts...</h1>}>
                <Posts resource={deferredResource} isDeferred={isDeferred}/>
            </Suspense>
        </Suspense>
    )
}

小道具からの値をuseDeferredValueから取得した値と比較できます。それらが異なる場合、ページはまだロード中です。



興味深いことに、useDeferredValueを使用すると、ネットワークを介して送信されるデータだけでなく、大規模な計算によるインターフェイスのフリーズを取り除くために、遅延読み込みのトリックを繰り返すことができます。



なぜこれが素晴らしいのですか？デバイスが異なれば、動作も異なります。新しいiPhoneでuseDeferredValueを使用してアプリケーションを実行すると、ページが重い場合でも、ページからページへの移行は即座に行われます。ただし、デバウンスを使用すると、強力なデバイスでも遅延が発生します。UseDeferredValueとコンカレントモードはハードウェアに適応します。動作が遅い場合でも、入力は飛行し、デバイスが許可するようにページ自体が更新されます。

プロジェクトをコンカレントモードに切り替えるにはどうすればよいですか？

競合モードはモードなので、有効にする必要があります。ファイバーをフル稼働させるトグルスイッチのように。どこから始めますか？



レガシーを削除します。コード内の廃止されたメソッドをすべて削除し、それらがライブラリにないことを確認します。アプリケーションがReact.StrictModeで正常に動作する場合、すべてが正常です-移動は簡単です。潜在的な複雑さは、ライブラリ内の問題です。この場合、新しいバージョンにアップグレードするか、ライブラリを変更する必要があります。または競争体制を放棄します。レガシーを取り除いた後、残っているのはルートを切り替えることだけです。



コンカレントモードの登場により、3つのルート接続モードが利用可能になります。

• 
  
  ReactDOM.render(<App />, rootNode)
  
  競合モードがリリースされた後、古いレンダリングモードは非推奨になります。
• ブロッキングモード
  
  ReactDOM.createBlockingRoot(rootNode).render(<App />)
  
  中間段階として、ブロッキングモードが追加されます。これにより、移転にレガシーやその他の問題があるプロジェクトでの競争モードの機会の一部にアクセスできます。
• 競争モード
  
  ReactDOM.createRoot(rootNode).render(<App />)
  
  すべてが順調で、レガシーがなく、プロジェクトをすぐに切り替えることができる場合は、プロジェクトのレンダリングをcreateRootに置き換えて、明るい未来に向けてオフにします。

結論

React内のブロック操作は、ファイバーに切り替えることで非同期になります。アプリケーションをデバイスの機能とネットワーク速度の両方に簡単に適応させる新しいツールが登場しています。

• サスペンス。これにより、データのロード順序を指定できます。
• SuspenseListは、さらに便利です。
• useTransitionを使用して、サスペンスでラップされたコンポーネント間のスムーズな遷移を作成します。
• useDeferredValue-I / Oおよびコンポーネントの更新中に古いデータを表示します

コンカレントモードがまだ出ていない状態で試してみてください。コンカレントモードを使用すると、印象的な結果を得ることができます。便利な順序でのコンポーネントの高速でスムーズなロード、超流動インターフェース。詳細はドキュメントに記載されており、自分で調べる価値のある例を含むデモがあります。また、ファイバーアーキテクチャがどのように機能するかについて知りたい場合は、興味深い講演へのリンクをご覧ください。



プロジェクトを評価します-新しいツールで何を改善できますか？そして、競争体制が整ったら、気軽に移動してください。すべてが素晴らしいでしょう！