October 23, 2018 by Sebastian Markbåge

Today we’re releasing React 16.6 with a few new convenient features. A form of PureComponent/shouldComponentUpdate for function components, a way to do code splitting using Suspense and an easier way to consume Context from class components.

本日、新しい便利な機能を持った React 16.6 をリリースしました。function component のための PureComponent/shouldComponentUpdate の書式、Suspense を使った code splitting の方法、そしてclass component からコンテキストを consume するためのより簡単な方法などです。

Check out the full changelog below.

すべての変更履歴を以下でチェックしてみましょう。

以下をチェックしてください。　

React.memo

Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.

class component は、PureComponent または shouldComponentUpdate を使うと、入力された props が同じ時、レンダリングしないようにできます。これと同じことが、function component を React.memo でラップすることで、function component でもできるようになりました。

const MyComponent = React.memo(function MyComponent(props) {
  /* only rerenders if props change */
  /* props が変更された時のみレンダリングされます。 */
});

React.lazy: Code-Splitting with Suspense – Suspense を使った Code-Splitting

You may have seen Dan’s talk about React Suspense at JSConf Iceland. Now you can use the Suspense component to do code-splitting by wrapping a dynamic import in a call to React.lazy().

Dan の JSConf Iceland での React Suspense に関する講演をもうすでに観たかもしれません。今回、React.lazy() の呼び出しの中で、dynamic import をラップすることによって、Suspense component を使って、Code-Splitting ができるようになりました。

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

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

The Suspense component will also allow library authors to start building data fetching with Suspense support in the future.

Suspense component は、さらにライブラリの開発者に、データの取得を構築するサポートを今後開始する予定です。

Note: This feature is not yet available for server-side rendering. Suspense support will be added in a later release.

注意: この機能は、まだサーバーサイドレンダリングでは利用できません。Suspense のサポートは今後のリリースにおいて追加される予定です。

static contextType

In React 16.3 we introduced the official Context API as a replacement to the previous Legacy Context API.

React 16.3 において、わたしたちは、以前の古い Legacy Context API の代わりとして、公式の Context API を導入しました。

We’ve heard feedback that adopting the new render prop API can be difficult in class components. So we’ve add a convenience API to consume a context value from within a class component.

わたしたちは、新しい render prop API を class component 内に導入するのが難しいというフィードバックを聞いてきました。そこで、class component 内から コンテキストの値を consume できるように便利な API を追加しました。

class MyClass extends React.Component {
  static contextType = MyContext;
  componentDidMount() {
    let value = this.context;
    /* perform a side-effect at mount using the value of MyContext */
    /* MyContext の値を使用して、マウント時に副作用を実行する */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* render something based on the value of MyContext */
    /* MyContext の値に基づいて何かをレンダリングする */
  }
}

static getDerivedStateFromError()

React 16 introduced Error Boundaries for handling errors thrown in React renders. We already had the componentDidCatch lifecycle method which gets fired after an error has already happened. It’s great for logging errors to the server. It also lets you show a different UI to the user by calling setState.

React 16 は React のレンダリングにおける投げられるエラーをハンドリングするために、Error Boundaries を導入しました。これによりエラーの発生後に発火するライフサイクルメソッドの componentDidCatch を使うことができます。これはサーバーに対してエラーのログを取るのに便利です。さらに setState を呼ぶことによってユーザーに対して異なる UI を表示することもできます。

Before that is fired, we render null in place of the tree that threw an error. This sometimes breaks parent components that don’t expect their refs to be empty. It also doesn’t work to recover from errors on the server since the Did lifecycle methods don’t fire during server-side rendering.

componentDidCatch が発火される前に、エラーを throw したツリーに代わって null がレンダリングされます。これは時に自身の ref が空であることを予期しない親コンポーネントを壊します。さらに、Did 系のライフサイクルメソッドはサーバーサイドレンダリングの中では発火しないので、サーバー上のエラーからは復旧することができません。

We’re adding another error method that lets you render the fallback UI before the render completes. See the docs for getDerivedStateFromError().

今回、レンダリングが完了する前にフォールバックの UI をレンダリングするもう一つのエラー系のメソッドを追加しました。getDerivedStateFromError() の詳細はドキュメントでご確認ください。

Note: getDerivedStateFromError() is not yet available for server-side rendering. It is designed to work with server-side rendering in a future release. We’re releasing it early so that you can start preparing to use it.

注意: getDerivedStateFromError() は、まだサーバーサイドレンダリングでは利用できません。今後のリリースにおいて、サーバーサイドレンダリングで動くように計画されています。このメソッドを使う準備ができるように、早めにリリースしています。

Deprecations in StrictMode

In 16.3 we introduced the StrictMode component. It lets you opt-in to early warnings for patterns that might cause problems in the future.

16.3 において、わたしたちは、StrictMode コンポーネントを導入しました。これにより、将来的に問題を引き起こす可能性のあるパターンに対して、早めの警告をオプトインすることができるようになりました。

We’ve added two more APIs to the list of deprecated APIs in StrictMode. If you don’t use StrictMode you don’t have to worry; these warning won’t fire for you.

わたしたちは、さらに 2 つの API を StrictMode の非推奨 API リストに追加しました。もし、StrictMode を使わないのであれば、心配する必要はありません。これらの警告は発火されません。

・ReactDOM.findDOMNode() – This API is often misunderstood and most uses of it are unnecessary. It can also be surprisingly slow in React 16. See the docs for possible upgrade paths.
・Legacy Context using contextTypes and getChildContext – Legacy context makes React slightly slower and bigger than it needs to be. That’s why we strongly want to encourage upgrading to the new context API. Hopefully the addition of the contextType API makes this a bit easier.

• ReactDOM.findDOMNode() – この API はよく誤解されており、ほとんどの場合使用する必要がないものです。React 16 では驚くほど遅くなる可能性があります。可能なアップグレードパスについては、ドキュメントを参照してください。
• contextTypes や getChildContext を使用している Legacy Context – Legacy context は React を必要以上に遅くし、大きくします。このため、わたしたちは、新しい context API にアップグレードすることを強く推奨しています。うまくいけば、contextType API の追加は、アップグレードをより簡単なものにします。

If you’re having trouble upgrading, we’d like to hear your feedback.

もし、アップグレードがうまくいかない場合は、フィードバックをお聞かせください。

Installation

React v16.6.0 is available on the npm registry.

React v16.6.0 は npm registry で利用できます。

To install React 16 with Yarn, run:

Yarn で React 16 をインストールする場合は、以下を実行してください。

To install React 16 with npm, run:

npm で React 16 をインストールする場合は、以下を実行してください。

We also provide UMD builds of React via a CDN:

また、CDN による 　React の UDM 版も提供しています。

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

Refer to the documentation for detailed installation instructions.

詳細なインストール方法についてはドキュメントを参照してください。

Changelog – 変更履歴

React

・Add React.memo() as an alternative to PureComponent for functions. (@acdlite in #13748)
・Add React.lazy() for code splitting components. (@acdlite in #13885)
・React.StrictMode now warns about legacy context API. (@bvaughn in #13760)
・React.StrictMode now warns about findDOMNode. (@sebmarkbage in #13841)
・Rename unstable_AsyncMode to unstable_ConcurrentMode. (@trueadm in #13732)
・Rename unstable_Placeholder to Suspense, and delayMs to maxDuration. (@gaearon in #13799 and @sebmarkbage in #13922)

• PureComponent の代わりとして 関数のために React.memo() を追加しました。(@acdlite in #13748)
• code splitting するコンポーネントのために React.lazy() を追加しました。 (@acdlite in #13885)
• React.StrictMode は legacy context API に対して警告を出すようになりました。 (@bvaughn in #13760)
• React.StrictMode は findDOMNode に対して警告を出すようになりました。 (@sebmarkbage in #13841)
• unstable_AsyncMode を unstable_ConcurrentMode に名前を変更しました。 (@trueadm in #13732)
• unstable_Placeholder を Suspenseに、そして delayMs を maxDuration に名前を変更しました。 (@gaearon in #13799 and @sebmarkbage in #13922)

React DOM

・Add contextType as a more ergonomic way to subscribe to context from a class. (@bvaughn in #13728)
・Add getDerivedStateFromError lifecycle method for catching errors in a future asynchronous server-side renderer. (@bvaughn in #13746)
・Warn when <Context> is used instead of <Context.Consumer>. (@trueadm in #13829)
・Fix gray overlay on iOS Safari. (@philipp-spiess in #13778)
・Fix a bug caused by overwriting window.event in development. (@sergei-startsev in #13697)

• クラスからのコンテキストを subscribe するためのより人間工学的な方法として contextType を追加しました。 (@bvaughn in #13728)
• 将来の非同期サーバーサイドレンダリングにおいてエラーをキャッチするために getDerivedStateFromError ライフサイクルメソッドを追加しました。(@bvaughn in #13746)
• <Context> が <Context.Consumer> に代わって使われる時に警告を出すようにしました。(@trueadm in #13829)
• iOS Safari でのグレーオーバーレイを修正しました. (@philipp-spiess in #13778)
• development で window.event を上書きすることで起こるバグを修正しました。(@sergei-startsev in #13697)

React DOM Server

・Add support for React.memo(). (@alexmckenley in #13855)
・Add support for contextType. (@alexmckenley and @sebmarkbage in #13889)

• React.memo() のサポートを追加しました。(@alexmckenley in #13855)
• contextType のサポートを追加しました。(@alexmckenley and @sebmarkbage in #13889)

Scheduler (Experimental – 実験的)

・Rename the package to scheduler. (@gaearon in #13683)
・Support priority levels, continuations, and wrapped callbacks. (@acdlite in #13720 and #13842)
・Improve the fallback mechanism in non-DOM environments. (@acdlite in #13740)
・Schedule requestAnimationFrame earlier. (@acdlite in #13785)
・Fix the DOM detection to be more thorough. (@trueadm in #13731)
・Fix bugs with interaction tracing. (@bvaughn in #13590)
・Add the envify transform to the package. (@mridgway in #13766)

• パッケージ名を scheduler に変更しました。(@gaearon in #13683)
• 優先レベル、継続、ラップされたコールバックに対応しました。(@acdlite in #13720 and #13842)
• 非 DOM 環境におけるフォールバックのメカニズムを改善しました。(@acdlite in #13740)
• requestAnimationFrame 　を先にスケジュールするようにしました。(@acdlite in #13785)
• DOM の検出がより完全となるように修正しました。(@trueadm in #13731)
• インタラクショントレースのバグを修正しました。(@bvaughn in #13590)
• envify 変換をプロジェクトに追加しました。(@mridgway in #13766)

訳者まとめ

翻訳は以上です。React v16 のマイナーリリースはいつも充実していて、追うのも大変になってきています。

今回追加された機能は、まず React.memo() ですね。これは PureComponent の Function Component（旧称 Stateless Functional Component）版と言えます。受け取った Props の値が同じ時に余計なレンダリングを停止することができるようになります。これは凄く待ち望んでいた機能ですね。

それから、React.lazy()は、コンポーネントを動的にインポートできるようにしてくれるものです。Suspense コンポーネントを使って、遅延ロード時のインジケータなどのフォールバック用のコンポーネントを表示し、エラーは Error Boundaries でキャッチするといった感じの使い方が提案されています。

そして、contextType ですね。React 16.3 で追加された Context API ですが、コンテキストの値を取得するには、Context.Consumer コンポーネント内で Render Props を使う必要があり、けっこう書くのが大変でした。contextType を使うと簡単にコンテキストの値を取得できるようになるので、Context API の使用頻度も高くなるのではないでしょうか。実際にサンプルを書いて試してみましたので、紹介しておきます。

• maechabin/react-context-api-sample – GitHub

その他にもいろいろと変更がありましたが、記事内にリンクなどもありますので、興味があればそれぞれチェックしてもらえればと思います。次回 16.7 ではいよいよ冒頭でも述べました React Hooks がリリースされる予定のようです。Function Component で状態を持てるようになります。コンテキストの値も簡単に　　Function Component で取得できるようになります。React のベストプラクティス的なものも大きく変わりそうです。アーリーアダプターの方達がこぞって React Hooks の解説記事などを書いてくれています。そういったものを参考に予習しておこうと思っています。Dan Abramov 氏も React Hooks に関してブログ記事を投稿しています。最後に紹介しておきます。

• Making Sense of React Hooks – Dan Abramov – Medium