見出し画像

React Fiberを理解する:Reactを高速かつ効率的にする方法

この記事は弊社のフルスタックエンジニア:Raj Chaudharyが作成した記事です。英語版はこちらをご覧ください。
Medium

Reactは最初のリリースから多くの変更を経てきたが、最も重要なアップデートのひとつがReact Fiberだ。React 16で導入されたFiberは、ReactがUIのレンダリングと更新を処理する方法に革命をもたらした。Fiberが何をするのかを理解するために、その仕組みとReactを高速かつ効率的にする理由を掘り下げてみよう。

React Fiberとは何ですか?

React Fiberは、Reactのコア・アルゴリズムを再実装し、レンダリング性能を向上させている。Fiber以前は、Reactはスタックベースのアプローチを使って更新を管理していた。これは小規模なアプリケーションではうまく機能したが、多くの要素を含む大規模で複雑なユーザーインターフェースを扱う際には問題が生じた。Fiberは、特に高負荷や頻繁な更新を扱うアプリケーションに対して、Reactの応答性と効率性を高めることで、この問題を解決するために設計された。

React Fiberの仕組み

Fiberの基本は、インクリメンタル・レンダリングの概念だ。Fiber以前は、Reactはコンポーネントツリー全体を同期的にレンダリングしていた。つまり、Reactが更新をトリガーすると、そのツリー内のすべてのコンポーネントの処理を終えてから、ブラウザに制御を戻す必要があった。このため、特に複雑な更新を処理する場合、ユーザーインターフェースが遅くなり、反応が悪くなる可能性があった。
スレッドは、この処理をスレッドと呼ばれる小さな作業単位に分割する。Reactでは、すべてを同時にレンダリングする代わりに、必要に応じてレンダリングを一時停止したり再開したりできる。これは、次の2つの重要なコンセプトによって実現される:

  1. ワークユニット: 各コンポーネントは小さな独立したタスク(スレッド)に分割され、Reactが一度に1つずつ処理する。これらのタスクは一時停止や再開が可能で、更新プロセスをより柔軟にします。

  2. 優先順位付け: React Fiberは、各更新に優先度を割り当てます。優先度の高いタスク(ユーザー入力やアニメーションなど)が最初に処理され、優先度の低いタスク(バックグラウンド更新など)は延期されます。これにより、スムーズなユーザー体験が保証されます。

調整プロセス

Reactのコア機能のひとつに、ステートやプロップが変更されたときにDOMを更新するプロセスであるリコンシリエーションがある。fiberを使えば、リコンシリエーションはより効果的になる。Reactでは、リコンシリエーションのプロセスを2つのフェーズに分けることができる:

  1. レンダーフェーズ(作業フェーズ):

    1. この段階では、Reactは必要な作業を準備するが、実際のDOMには変更を加えない。

    2. Reactは、コンポーネントツリーの新しい状態を表す未完成のツリーを作成する。

    3. ユーザー入力の処理など、より優先順位の高いタスクが発生した場合は、このフェーズを一時停止することができます。

  2. コミットフェーズ:

    1. レンダリングフェーズが完了すると、Reactはレンダリングフェーズに入り、実際のDOMに変更を適用する。

    2. コミット・フェーズは常に同期的で、ユーザー・インターフェースの一貫性を保つために一度に行われます。.

これらのフェーズを分離することで、FiberはReactがメインスレッドを長時間ブロックすることなくUIを更新できることを保証し、その結果パフォーマンスが向上する。

React Fiberが高速で効率的な理由。

Fiberは、Reactをより高速かつ効率的にするいくつかの最適化を導入している。主な機能をいくつか紹介しよう:

  1. タイム・スライシング: Fiberは、Reactがレンダリング作業をチャンクに分割する機能であるタイムスライシングを可能にする。Reactはレンダリングを一時停止して、ユーザー入力への応答など、より重要なタスクを優先させることができる。これにより、特に大規模なアプリケーションでは、ユーザーインターフェースのインタラクションがよりスムーズになります。

  2. コンカレント・モード: スレッド上に構築されたコンカレント・モードは、Reactのパフォーマンスを次のレベルに引き上げる。つまり、アプリケーションの残りの部分をブロックすることなく、UIのさまざまな部分を独立して更新することができます。例えば、ReactがUIの一部分のデータをロードしている間、他のコンポーネントのレンダリングを続けることができる。これによって、アプリは激しいアップデートの最中でも準備万端を保つことができる。

  3. サスペンス:  React Fiberは、ReactがUIを更新する前に、非同期のデータが読み込まれるのを待つことを可能にするメカニズムであるSusppenseを導入した。これは、Reactがデータを待っている間に緊急コンテンツ(数字のフェッチなど)を表示するようなデータフェッチシナリオで特に便利です。

実例: ソーシャルメディア・プラットフォームのような大規模なアプリケーションを構築しているとします。アプリケーションには、複数のコンポーネントの更新、投稿リストのレンダリング、アニメーションの処理、タイピングやスクロールなどのユーザー入力への応答などが含まれます。Fiberがなければ、Reactはすべての更新を一度に処理し、メインスレッドをブロックしてUIが応答しなくなる可能性があります。しかし、Fiberを使用すると、Reactは以下のことが可能になります。:

  • ユーザーが検索ボックスに入力し始めたら、優先度の低いタスク(バックグラウンド更新など)を一時停止する。

  • アニメーションやユーザー入力のような重要なタスクに優先順位をつけ、スムーズでレスポンスの良いものにする。

  • 緊急性の低い更新(新着記事リストのレンダリングなど)を延期し、アプリの高速性を確保する。

結論
React Fiberは、Reactをよりスケーラブルで応答性の高いものにし、特に複雑なアプリケーションに対応できるようにした。インクリメンタルレンダリング、タスクの優先順位付け、時間配分などの機能を導入することで、Reactはより要求の厳しいユーザーインターフェースを簡単に扱えるようになった。React Fiberは単なる最適化ではなく、Reactの動作の根本的な変更であり、Concurrent ModeやSusppenseのような将来の改良への道を開くものです。


協業開発及び開発パートナーをお探しのお客様へ

弊社は、ネパールに海外拠点を持ち、生成AI、モバイルアプリ、システム開発を中心に事業を展開する企業です。
自社サービスの開発経験を活かし、クライアント様と共に事業を創造することを重視し、創業以来、スタートアップから中小企業、大手企業、自治体まで、幅広い開発実績があります。プロダクトはユーザーが使いやすいように設計しており、企画から開発、保守運用まで対応しています。開発技術を厳選し限定することで、セキュリティ、プロダクトの品質向上に努めており、事業開発に関する課題を深く理解し、最適なご提案が可能です
お問い合わせはこちらから:
お問い合わせフォーム:https://readytowork.jp/

直通番号:080-8940-7169