開発者ドキュメント

Reactサスペンスによるコード分割

getdocs

React.Suspense、 一緒に React.lazy()、 v16.6 で導入された、コンポーネントが実際にレンダリングする前に何かを待つことを可能にする新しい機能を追加します。 この新しい機能により、コード分割とReactコンポーネントの遅延読み込みが簡単になります。

入門

開始するには、Reactv16.6以降を使用していることを確認する必要があります。 新しいプロジェクトを開始する場合、または正しいバージョンではない古いプロジェクトで作業している場合は、次のようにします。

# Via npm
$ npm install --save react react-dom

# Or via Yarn
$ yarn add react react-dom

次に、他のコンポーネントの遅延読み込みを処理するコンポーネント内で、両方をインポートします Suspense と lazy:

import React, { lazy, Suspense } from 'react';

コード分割について

それを指摘する価値があります Suspense と lazy コンポーネントをすばやく簡単に遅延ロードできます。アプリケーション全体をWebpackなどの単一のスクリプトにバンドルしている場合は、ゲートから多くのメリットが得られない可能性があります。

この記事の範囲外ですが、WebpackドキュメントでWebpackを使用したコード分割について読むことができます。

React.lazy()

The lazy() メソッドは、最初のパラメータとして関数を取ります。 import そのような別のコンポーネント：

const SomeComponent = lazy(() => import('./SomeComponent');

なぜなら import に渡される関数の内部にあります lazy()、コンポーネントのロードは、ファイルの先頭にある他のインポートで熱心にロードされるのではなく、実際にコンポーネントを使用するまで行われません。

React.Suspense

The React.Suspense コンポーネントを使用すると、コンポーネントをまとめて指定できます fallback ラップされたコンポーネントのロード中に表示されるコンポーネント：

<Suspense fallback={<div>Loading...</div>}>
  <SomeComponent />
</Suspense>

これは、大きい側にあるコンポーネントをロードする場合、または import 大規模なライブラリ（ react-pdf また react-draft-wysiwyg).

コンポーネントが大規模な部門に属していない場合でも、遅延読み込みは、最良のインターネット接続を持たない可能性のあるエンドユーザーを支援することができます。

すべてを一緒に入れて

本当に使ってみて React.Suspense と React.lazy() 2つの別々のファイルが必要になります。 1つは基本的なReactアプリの定型文であり、もう1つは遅延読み込みされるコンポーネントです。

これから行うコンポーネントから始めましょう import. この例では、常にdapper Alligator.ioロゴをロードする非常に単純なコンポーネントを作成しました。

AlligatorioLogo.jsx
import React from "react";

function AlligatorioLogo() {
  const imageSource = "https://uploads.codesandbox.io/uploads/user"
    + "/39d6d9f6-60d2-4a60-9eb7-9250c3417bef"
    + "/saY6-alligatorio-logo.png";

  return (
    <img
      alt="Alligator.io Logo"
      src={imageSource}
      width="250"
    />
  );
}

export default AlligatorioLogo;

次は、アプリのボイラープレートコードと、コンポーネントの読み込みを手動でトリガーできるようにするための状態ロジックの一部です。

App.jsx
import React, { Component, Fragment, lazy, Suspense } from "react";
import { render } from "react-dom";

import "./styles.css";

const AlligatorioLogo = lazy(() => import("./AlligatorioLogo"));

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showLogo: false
    };
  }

  onClick = () => {
    this.setState({ showLogo: !this.state.showLogo });
  };

  render() {
    return (
      <div className="App">
        <h1>React.lazy() + &lt;React.Suspense /&gt; Demo</h1>
        <div>
          <button onClick={this.onClick}>
            {this.state.showLogo &&
              <Fragment>Click to Hide the Logo</Fragment>
            }
            {!this.state.showLogo && (
              <Fragment>Click to Show the Logo</Fragment>
            )}
          </button>
        </div>
        <hr />
        {this.state.showLogo && (
          <Suspense fallback={<div>Loading...</div>}>
            <AlligatorioLogo />
          </Suspense>
        )}
      </div>
    );
  }
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<App />, container);

ご覧のとおり、使用することはあまりありません Suspense と lazy(). 非常に単純であるため、既存のシステムをシステムに移植することは、特にコンポーネントを個別のファイルに既に分割している場合は、それほど大きな負担にはなりません。

結論

の導入 React.lazy() と React.Suspense これは、最新のWebアプリケーションを構築するために作成する必要のある定型コードの量を減らすのに役立つ素晴らしい一歩です。

すでにかなり強力ですが、 Suspense 欠点がないわけではありません。 将来のv16ポイントリリースのReactロードマップにある大きな欠けている部分は、使用する機能です Suspense データフェッチあり。

このデータフェッチ機能が利用可能になると、 Suspense AJAX呼び出しなどを待機し、ロード中にフォールバックコンポーネントを表示できるようになります。

注目に値することも Suspense サーバーサイドレンダリングで使用する準備が整っていません。

あなたが与える準備ができているなら React.Suspense と React.lazy() スピンしたら、 CodeSandbox にアクセスして、この記事のコードの動作を確認できます。

モバイルバージョンを終了