Reactガイドを読んでいくその32
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
コード分割
React.lazy
動的インポートを通常のコンポーネントとしてレンダリングすることができる。
qiita.com
Suspense
Suspense内で遅延コンポーネントはレンダーされる。
遅延コンポーネントのローディング待機中にフォールバック用のコンテンツを表示可能。
fallbackプロパティはコンポーネントがロードされるのを待っている間に表示したいあらゆるReact要素を受け取る。
const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<div>Loading...</div>}> <section> <OtherComponent /> <AnotherComponent /> </section> </Suspense> </div> ); }
Error Boundary
他のモジュールがロードに失敗した場合error boundaryを使用することでエラーハンドリングが可能。
error boundaryを使用することで遅延コンポーネントの上位のあらゆる場所で使用が可能で、エラー表示できる。
import MyErrorBoundary from './MyErrorBoundary'; const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent')); const MyComponent = () => ( <div> <MyErrorBoundary> <Suspense fallback={<div>Loading...</div>}> <section> <OtherComponent /> <AnotherComponent /> </section> </Suspense> </MyErrorBoundary> </div> );
ルーティング単位でのコード分割
アプリ内のどこにコード分割を導入するか決定は意外と面倒。
ユーザ体験を妨げず、バンドルを均等に分割するようにしたい。
コード分割に適しているのはルーティング。
ページのロードには多少時間がかかるのはユーザ体験としても違和感が少ないため。
React Routerのようなライブラリを使ったアプリにReact.lazyを使用するような分割をすると良い。
名前付きエクスポート
React.lazyはデフォルトのみ
インポートしたいモジュールがエクスポートを使用している場合、
それをデフォルトとして再度エクスポートする中間モジュールを作成可能。
// ManyComponents.js export const MyComponent = /* ... */; export const MyUnusedComponent = /* ... */;
今日はここまで。