HTMLイベントハンドラ対リアクションイベントハンドラ

Question

HTMLとReactで使用されるイベントハンドラについて質問したいと思います。

JavascriptとjQueryのジョン・ダケットによって書かれた本では、著者が使用してHTMLイベントハンドラ属性は以下のようなインスタンスの何かのために悪い習慣 考えられていることを述べた：

<button onClick="hide()">click me</button> 

しかし、最近、私は学ぶことを始めていますが反応して、コンポーネントが定義されたとき、属性として使用されるイベントハンドラの多くの例があり、そうするのが一般的だが、そうすることのために批判を得ていない、

<button onClick={doSomething}> 
    xxxyyyzzz 
</button> 

はこれに理由があります？これは、Reactでイベントハンドラをバインドする唯一の方法ですから、実際にはHTMLからコンポーネント要素をビルドしていますが、イベントハンドラ属性を使用してイベントを割り当てます。 Reactはなぜですか悪い練習とみなされるコンセプトを取り戻すか？

Answer 1

なぜインラインイベントリスナーが悪いのですか？

HTMLはドキュメントの内容と構造を記述し、CSSは外観を記述し、JavaScriptはロジックや動作に関するものです。これらは別々に保管する必要があります。 HTMLコードとJavaScriptコードは混在しないでください。あなたの例は次のとおりです：

<button onClick="hide()">click me</button> 

これはReactには当てはまりません.1つのHTMLファイルはありません。代わりに、独自の構造、スタイル、および動作を持つモジュール化されたコンポーネントがあります。

Reactでは、プレゼンテーションとロジックの分離を望んでいませんが、自己完結型のコンポーネントです。それは、単に "Vanilla JavaScript"/DOM APIを使用するアプリケーションとは別のものです。

Answer 2

以前のJavascriptの時代では、より良いコード管理のために可能な限りHTMLとJSを分離したいので、これは悪い習慣とみなされます。 HTMLページ内のonClickにすぐにナビゲートすることはできません。別の束のbuttonがあります。

ここでReactでは、コンポーネントツリーを通じてアプリケーションコードを管理します。私が反応の力があると思う：

• モジュール方式
• 作曲
• DRY戻るあなたの簡単な例に

は、onClickハンドラが簡単に内部管理されます（自分を繰り返さないでください）あなたのコンポーネント。おそらく他のハンドラもあるかもしれませんが、1つのコンポーネントの範囲内ではまだ便利です。あなたのコンポーネント階層のどのレベルに依存するのか、あなたがしたいことはすべて同じページ、同じクラス、同じ機能にあります。