ReactとHTMLのonclickにおける違い
ReactとHTMLにおけるonclick属性の記述方法の違いは、イベントハンドラーの処理方法の違いに起因します。
React
onclick={test}
- 関数オブジェクトの内容を渡す
- イベント発生時に渡された関数オブジェクトが実行される
- イメージ的にはコンポーネント内には関数が存在するけれどscriptタグに記載の無い（レンダリングの中にない）関数の処理の内容をonclickのイベントハンドラに格納している。
HTML
onclick="test()"
- 関数名を文字列として渡す
- イベント発生時に文字列が評価され、関数呼び出しが行われる
- イメージ的にはクリックされると
return "test()";のようになってscriptタグのtest関数が呼び出される感じ。
Reactにおける関数オブジェクトの扱い
Reactでは、イベントハンドラーとして関数オブジェクトを直接渡すことができます。これは、JavaScriptの関数オブジェクトは、メモリ上のアドレスを持つオブジェクトであるためです。
onclick={test}と記述すると、test関数のオブジェクトそのものがonclick属性に格納されます。そして、イベント発生時に、このオブジェクトが呼び出され、イベントハンドラーとして処理されます。
HTMLにおける関数名の扱い
一方、HTMLでは、イベントハンドラーとして関数名を文字列として渡す必要があります。これは、HTMLがJavaScriptよりも古い言語であり、関数オブジェクトを直接扱う機能がなかったためです。
onclick="test()"と記述すると、testという文字列がonclick属性に格納されます。そして、イベント発生時に、この文字列が評価され、test()という関数呼び出しが行われます。
まとめ
ReactとHTMLにおけるonclick属性の記述方法の違いは、イベントハンドラーの処理方法の違いに起因します。
Reactは関数オブジェクトを直接渡すことができる一方、HTMLは関数名を文字列として渡す必要があります。
scriptタグにtest関数の記載があれば、reactの方でもonclick="test()"で行けそうですが、Reactではコンポーネント内には関数が存在するけれどscriptタグに記載の無い（レンダリングの中にない）関数を実行することが多いので、onclick={test}と記述することでコンポーネント内に定義した関数の処理の内容をonclickのイベントハンドラに格納することが出来るという事です。
補足
Reactでは、イベントハンドラーの処理をより詳細に制御するために、e => test(e)のように、イベントオブジェクトを受け取る関数オブジェクトを渡すこともできます。
HTML5では、addEventListener()イベントリスナー APIを用いて、イベントハンドラーを設定することもできます。この方法では、Reactと同様に、関数オブジェクトを直接渡すことができます。