Fast Refreshを搭載したReact Native 0.61を発表
·読了時間3分
React Native 0.61を発表できることを嬉しく思います。これには、Fast Refreshと呼ぶ新しいリロードエクスペリエンスが含まれています。
Fast Refresh
React Nativeコミュニティに一般的な問題点について尋ねたところ、最も多かった回答の1つは、「ホットリローディング」機能が壊れていることでした。関数コンポーネントでは信頼性が低く、画面の更新に失敗することが多く、タイプミスやミスに対して耐性がありませんでした。ほとんどの人は、信頼性が低すぎるため、オフにしていたと聞きました。
React Native 0.61では、**既存の「ライブリローディング」（保存時にリロード）と「ホットリローディング」機能を「Fast Refresh」という単一の新しい機能に統合しています**。Fast Refreshは、以下の原則に基づいてゼロから実装されました。
- Fast Refreshは、関数コンポーネントとHooksを含む、**最新のReactを完全にサポート**します。
- Fast Refreshは、タイプミスやその他のミスが発生した後、**正常に回復**し、必要に応じて完全なリロードにフォールバックします。
- Fast Refreshは、**侵襲的なコード変換を実行しない**ため、デフォルトでオンにするのに十分な信頼性があります。
Fast Refreshの動作を確認するには、このビデオをご覧ください。
試してみて、ご意見をお聞かせください！必要であれば、開発メニュー（iOSではCmd + D、AndroidではCmd + MまたはCtrl + M）でオフにすることができます。オンとオフの切り替えは瞬時に行われるため、いつでも実行できます。
Fast Refreshのヒントをいくつかご紹介します。
- Fast Refreshは、デフォルトで関数コンポーネント（およびHooks！）のReactローカル状態を保持します。
- 編集するたびにReactの状態をリセットする必要がある場合は、そのコンポーネントを含むファイルに特別な `// @refresh reset` コメントを追加できます。
- Fast Refreshは、状態を保持せずにクラスコンポーネントを常に再マウントします。これにより、確実に動作することが保証されます。
- 私たちは皆、コードでミスをします！ Fast Refreshは、ファイルを保存した後、自動的にレンダリングを再試行します。構文エラーまたはランタイムエラーを修正した後、アプリを手動でリロードする必要はありません。
- 編集中に `console.log` または `debugger` ステートメントを追加すると、優れたデバッグ手法になります。
Fast Refreshに関する問題はGitHubに報告してください。調査いたします。
その他の改善点
- **use_frameworks! CocoaPodsのサポートを修正しました。** 0.60では、CocoaPodsをデフォルトで統合するためにいくつかの更新を行いました。残念ながら、これはuse_frameworks!を使用するビルドを壊しました。これは0.61で修正され、動的フレームワークでのビルドが必要なiOSプロジェクトにReact Nativeを統合しやすくなりました。
- **useWindowDimensions Hookを追加しました。** この新しいHookは、ディメンションの更新を自動的に提供およびサブスクライブし、ほとんどの場合、Dimensions APIの代わりに使用できます。
- **Reactが16.9にアップグレードされました。** このバージョンでは、UNSAFE_ライフサイクルメソッドの古い名前が非推奨になり、`act`の改善などが含まれています。自動移行スクリプトと詳細については、React 16.9ブログ投稿をご覧ください。
破壊的変更
- **React .xcodeprojを削除しました。** 0.60では、CocoaPodsを介した自動リンクサポートを導入しました。また、CocoaPodsをe2eテストランに統合したため、これ以降、RNをiOSアプリに統合するための統一された標準的な方法ができました。これにより、React .xcodeprojのサポートが事実上廃止され、ファイルは0.61から削除されました。注：既に0.60の自動リンクを使用している場合は、影響を受けません。
謝辞
0.61の実現に貢献してくれたすべてのコントリビューターに感謝します！
すべての更新を確認するには、0.61 changelogをご覧ください。