React 16.6の新機能

昨日（10月23日）にReact 16.6がリリースされていましたが、入った新機能の3つが3つともありがたいものでした。

関数コンポーネントのPureComponent化…React.memo

以前に書いたように、stateのない関数コンポーネントとPureComponentは本来相性が良いはずなのですが、PureComponentはクラスコンポーネントである必要があるため、「そのためだけにクラスコンポーネントにする」「補助関数でクラスコンポーネントを生成する」などの手間を強いられていました。

React 16.6では、関数コンポーネントをPureComponent化するReact.memo関数が登場したため、もう悩む必要もなくなりました。

クラスコンポーネントへのContext適用…Component.contextType

逆に、クラスコンポーネントで書きづらかったのが、React 16.3以降のコンテキストで、値がRender propsの引数となるために、別に関数コンポーネントを立てて値を受け取るなどの手間が必要でした。

React 16.6では、コンポーネントの静的プロパティ（SomeComponent.contextType = SomeContext;のように代入する、あるいはクラス内部でstatic contextType = SomeContext;のようにする）としてcontextTypeにコンテキストを指定することができるようになりました。こうすると、renderやcomponentDidMountなどのライフサイクルメソッドで、this.contextとしてコンテキストが取れるようになります。

なお、複数のコンテキストが必要な場合は従来どおりRender Propsを使ってください、とのことです。

コンポーネントの遅延ロード…React.lazy/React.Suspense

巨大なアプリになれば、全部一気にダウンロードするとなるとかなり重くなってしまいます。Webpackでもimport()が動くようになっていますが、Reactでそれを支援する機能が登場しました。

まず、React.lazyを使って遅延ロード用のコンポーネントを生成します。引数には関数を指定しますが、

• 引数に指定するのは、実行するとimportを実行する関数
• その関数の返り値は、defaultからコンポーネントを取れるオブジェクト¹を返すPromise

というようなものになります。そして、<React.Suspense fallback={ ... }>の中でこのコンポーネントを使うと、読み込めていないタイミングではfallbackの中身を使う、というような動きになります（Suspenseのない箇所で使って、読み込みができていないとエラーになります。）。

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

外部リンク

• React v16.6.0: lazy, memo and contextType

脚注

1. default importでなかった場合に、{default: SomeComponent}のようなオブジェクトに変換して渡す、というような方法も考えられます。 ↩