リアクティブネイティブでのホットリロードと高速リフレッシュの違い


9

コードの変更を反映するための0.61より前のバージョンのreact-nativeでは、次のような2つのオプションがあります。

  1. ライブ再読み込み(変更を検出したときにアプリを再読み込みします)
  2. ホットリロード(リロードせずに変更を反映)

しかし、バージョン0.61では、高速リフレッシュと呼ばれる新しい開発者向け機能が導入されており、ホットリロードと同様に機能する ため、問題は、高速リフレッシュホットリロードの基本的な違いは何ですか

回答:


9

「ホットリロード」機能が壊れていました。これは関数コンポーネントでは確実に機能せず、画面の更新に失敗することが多く、タイプミスやミスに対する耐性がありませんでした。彼らはそれがあまりにも信頼性が低かったのでほとんどの人々がそれを止めたと聞きました。

React Native 0.61では、既存の「ライブリロード」(保存時にリロード)機能と「ホットリロード」機能を「高速リフレッシュ」と呼ばれる単一の新しい機能に統合しています。高速リフレッシュは、次の原則に従ってゼロから実装されました。

  • Fast Refreshは、関数コンポーネントやフックを含む最新のReactを完全にサポートしています。
  • 高速リフレッシュは、タイプミスやその他のミスの後に優雅に回復し、必要に応じて完全なリロードにフォールバックします。
  • 高速リフレッシュは侵襲的なコード変換を実行しないため、デフォルトでオンにするのに十分な信頼性があります。

公式ドキュメントからもっと読む


1

たとえば、スタイルなどのコンポーネントを変更する場合は、高速リフレッシュが最適です。現在のページにアプリをロードするだけです。ほとんどの編集は、1〜2秒以内に表示されます。

ホットリロードは、アプリを実行し続け、実行時に編集したファイルの新しいバージョンを挿入することです

高速リフレッシュのためにReactコンポーネントのみをエクスポートするモジュールを編集すると、高速リフレッシュはそのモジュールのコードのみを更新し、コンポーネントを再レンダリングします。
Reactコンポーネントではないエクスポートを含むモジュールを編集すると、高速リフレッシュはそのモジュールとそれをインポートする他のモジュールの両方を再実行します。

Reactツリー外のモジュールによってインポートされたファイルを編集すると、高速リフレッシュはフルリロードの実行にフォールバックします

一言で言えば、それはホットリロードよりも素晴らしいといっぱいです

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.