• HOME
  • Web Tech
  • フロントエンジニア必読!!Reactでイベント委譲する?しない?
ふとした疑問から発見!!Reactでのイベント委譲は不要!?

フロントエンジニア必読!!Reactでイベント委譲する?しない?

  • RSS
  • Facebook
  • twitter
  • LINE
  • はてなブックマーク

こんにちは!オンサイト株式会社のリードエンジニア、Akihiro Eguchi です。
私は日ごろから弊社の第2の開発『うきはラボ』で作業をしています!
『うきはラボ』については、こちらでも紹介していますので、ぜひご覧ください。

2020年 オンサイト開発合宿と『うきはラボ』をご紹介!!

さて本題ですが、今回は私がふと感じた「Reactでイベント委譲をする必要ある?」という疑問について調べてみましたので、ご紹介していきます。

もしイベント委譲が不要とわかれば、他の作業に時間を使うことができ、効率化が図れますね!

これまでのイベント委譲

サイトを制作していると繰り返しでli、tdなどの要素にイベントを設置することは頻繁に発生します。
これをReactで実装すると、

const handleClick = () => {
  console.log('クリックされたよ')
}
return (
  <ul>
    {list.map((row) => (
      <li key={row} onClick={handleClick}>{row}</li>
    ))}
  </ul>
)

このように子要素にイベントリスナをそれぞれ登録する記述になるのですが、ふとイベント委譲する必要ないのかなと思ってしました。

jQueryの頃だと

<ul id="parent-node">
  <% list.map((row) => { %>
    <li class="child-node" ><%= row %></li>
  <% }) %>
</ul>

※lodashのtemplate、listを使用しています。





$('#parent-node').on('click', '.child-node', () => {
  console.log('クリックされたよ')
})

のように親要素でイベントリスナを登録し、イベント委譲する実装が行儀の良いコードでした。

イベント委譲「するorしない」比較

イベント移譲を行う理由は下記の3点にあると思います。

①パフォーマンス
②メモリの増大
③子要素を追加した時のイベントリスナが付加されない

それぞれReact的な書き方で問題ないか調べたいところですが
すでに計測されている方がおりましたのでこちらを参照させていただきましょう!
https://dev.to/thawsitt/should-i-use-event-delegation-in-react-nl0


こちらを参照させていただきながら、
イベント委譲をした場合とイベント委譲をしない場合を比較した結果
①パフォーマンス
②メモリの増大

上記2点に関してはイベント委譲をしなくても問題ないことがわかりますね!

あとは
③子要素を追加した時のイベントリスナが付加されない
こちらに問題がなければ、
敢えてイベント委譲する必要はないということになります。

イベント委譲「するorしない」比較

なぜイベント委譲が不要?

なぜイベント委譲してないのに問題ないかと言いますと、
Reactではon***を設置した要素上にイベントリスナを登録しているように見えて、実際はReactDOM.render()の第二引数で渡した要素上(v16以下ではdocument要素)にグローバルなイベントリスナを設置していて、そこで登録されたイベント処理をイベント委譲にて捌いているのです。

加えてReactの宣言的UIのおかげで子要素の追加とイベントリスナ追加が分かれることがないので

③子要素を追加した時のイベントリスナが付加されない

も発生しません。

これによって敢えてイベント委譲する理由がなくなったことがわかると思います。

なぜイベント委譲が不要?

まとめ

「Reactでは内部で自動的にイベント委譲されるよう最適化されているので、明示的にイベント移譲する必要ない。」ということがお分かりいただけたでしょうか。

これで余計なことを気にせずにイベントリスナの登録が行えますね!

オンサイトは今回のような、ふとした疑問を大切にし、そこから新しい知見を得ていく文化があります。
CLIMBINGではそうして得られた生きた情報 ” Tips” を記事として皆さまにご紹介していきます。
生々しくてちょっとマニアックな “Tips” をお楽しみに!

またオンサイトではエンジニアチームのメンバーを募集しています!
少しでも興味のある方は採用サイトからご連絡ください。

一緒に働く仲間を募集中!採用

サービス資料請求 REQUEST        

    お名前
    会社名
    都道府県
    E-mail
    TEL


    Thank  you!

         

    資料請求ありがとうございます。
    担当者より連絡差し上げます。もう暫くお待ちくださいませ。