はじめに

自分の知識がReact16で止まっていたので再勉強していきます。React16の内容は以下。

次はReact17。

React 17について

React17では新機能追加は “なし”。

代わりに、アプリケーション内で複数のReactバージョンを安定して動作させる「段階的アップグレード」が可能になった。

これによって、アップグレード時にメンテナンスされていなくて複数のReactバージョンを混在させた結果、うまく動かないという問題を解消できるようになった。

※ ただし、基本的には一気にアップグレードするのがベストな選択肢と公式ブログには記載されている。

以下以外の変更点はこちらを参照。

イベントデリゲーションの変更

段階的アップグレードを可能にするため、イベントデリゲーションの変更が入った。

イベントデリゲーションとは、イベントリスナーを共通の親要素に設定し、子要素で発生するイベントを親要素でキャプチャして処理する手法である。

<ul id="parent">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// liタグの数が増減してもイベントリスナーを新たに追加したりする必要はない
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('Clicked item:', event.target.textContent);
  }
});

React17以前はイベントリスナーがdocumentに登録されていたため、同じページに複数のReactが存在し、それぞれが同じ種類のイベント（例えば、クリックイベント）をリッスンしている場合、イベントが伝播して競合するケースがあった。

しかし、React17ではReactのルートコンテナにバインドされるため、競合する可能性が減少した。以下はReact公式ブログから引用した画像。

参考