米Facebookは、UI構築のためのJavaScriptライブラリ「React v16.0」を、9月26日（現地時間）にリリースした。なお、Reactはバージョン15.6.2よりMITライセンスでリリースされており、「React v16.0」もMITライセンスのもとで利用できる。
「React v16.0」における、おもな変更点はrenderメソッドコンポーネントにおける、要素の配列を返せるfragments型の追加で、他の配列と同様に各要素にはキーを追加する必要がある。なお、将来的にはキーを必要としない特殊な構文をJSXに追加する予定となっている。また、文字列を返すstrings型も追加された。
エラー処理にも変更が加えられており、従来より発生していたレンダリング中のランタイムエラー発生時に、ページを更新して回復する必要があったのに対して、「React v16.0」ではコンポーネントのレンダリングメソッドまたはライフサイクルメソッドでエラーが発生した場合、デフォルトではコンポーネントツリー全体がルートからマウント解除され、破損したデータの読み込みを防ぐ。
ただし、エラー発生時にアプリケーション全体をアンマウントするのは理想的なUIではないため、サブツリー内でエラーを検出した際に、アプリケーションをアンマウントする代わりにフォールバックUIを表示する、エラー境界も利用できる。
このほか、親コンポーネントのDOM階層の外にあるDOMノードでレンダリングが可能なポータル機能や、再実装によってパフォーマンスを大きく向上したサーバレンダラー、カスタムDOM属性のサポートといった新機能の追加が行われており、React本体についてはファイルサイズが大幅に縮小された。
なお、「React v16.0」は、新コアアーキテクチャ「Fiber」上に構築された最初のバージョンであり、「Fiber」はエラー境界やfragmentsといった、「React v16.0」の新機能のすべてを担っている。開発チームでは、ブラウザに定期的に実行結果を送信することで、レンダリング作業をスケジューリングする非同期レンダリングにも積極的に取り組んでいるが、現時点では採用されていない。
従来バージョンからのアップグレードする場合の注意点としては、ReactDOM.renderの代わりにReactDOM.hydrateを使用する必要があるほか、すでに発表されているようにアドオンのサポートが廃止されている。
ほかにも、unstable_handleErrorメソッドがcomponentDidCatchメソッドに変更され、ReactDOM.renderおよびReactDOM.unstable_renderIntoContainerがライフサイクルメソッド内から呼び出された場合にnullを返すようになっている（ポータルや参照で回避可能）など、従来バージョンとの互換性が失われる、いくつかの変更が行われた。
【関連リンク】
・Facebook開発者向けサイト
・React（英語）
この記事は参考になりましたか？
- この記事の著者
-
CodeZine編集部（コードジンヘンシュウブ）
CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
