なぜ反応がこれをバインドする必要があるのですか

react がこれをバインドする必要がある理由: コンポーネントにイベント リスナーをバインドするのは、ユーザー インタラクションに応答するためです。特定のインタラクティブ アクションがイベントをトリガーするとき、リスニング関数はコンポーネントの特定の状態で動作する必要があることがよくあります。 . 値を設定し、ユーザーのクリック動作に対する応答フィードバックを提供します

#このチュートリアルの動作環境: Windows7 システム、React17 バージョン、DELL G3 コンピューター。

推奨:

react ビデオ チュートリアル

react がこれをバインドする必要がある理由:

1 . コード実行の詳細

他のコンポーネントで呼び出される場合、または

ReactDOM.render() メソッドを使用してインターフェイス上でレンダリングされる場合、コンポーネントのインスタンスが生成されます。なぜなら、コンポーネントは再利用でき、オブジェクト指向プログラミングはその位置付けに非常に適しているからです。 this が指す基本ルールによれば、ここでの this は最終的にコンポーネントのインスタンスを指すことになることがわかります。

コンポーネント インスタンスが生成されると、コンストラクターが実行されます。ここでは、次のコード行の分析に焦点を当てます:

this.handleClick = this.handleClick.bind(this);

この時点では、これは新しく生成されたインスタンスを指します。代入ステートメントは右側にあります 側の式は、最初にメソッド

this.handleClick() を検索します オブジェクトの属性検索メカニズム (プロトタイプ チェーンに沿って近くから遠くまで検索) から、次のことがわかります。プロトタイプ メソッド this.handleClick がここにあることを確認します ( )、次に bind(this) を実行します (this は新しく生成されたインスタンスを指すため、右側の式の後に)代入ステートメントの側が計算されると、これを指定する新しいメソッドが生成されます。その後、代入操作を実行し、新しく生成された関数をインスタンスの handleClick 属性に割り当てます。オブジェクトの代入メカニズムに従って、ここの handleClick はインスタンス属性として直接生成されます。要約すると、上記のステートメントは 1 つのことを実行します。

プロトタイプ メソッド

handleClick() をインスタンス メソッド handleClick() に変更し、これを強制的に指定します。メソッド内の は現在のインスタンスを指します。

2. ES5 の書き込みメソッドで binding(this) を使用しないのはなぜですか?

ES5 の書き込みメソッドでは、

React.createClass( )# の使用を指します。 ## メソッド。コンポーネントを定義します。React は、V16 以降の新しいバージョンではこの API を削除しました。以前のバージョンのソース コードを読むことで、このメソッドの詳細を確認できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> //旧版本`react`中`createClass`方法片段 if (this.__reactAutoBindMap) { this._bindAutoBindMethods(); }</pre><div class="contentsignin">ログイン後にコピー</div></div>古いバージョンの React では、

createClass()

の定義に上記のコードが見られますが、その他の複雑なロジックはさておき、メソッド名からこれが次のようなものであることがわかります。 a 自動バインディング メソッドは、実際には、これをコンポーネント内のカスタム メソッドに強制的にバインドすることを目的としています。興味のある読者は、詳細についてソース コードを確認してください。

3. これをバインドする必要性

コンポーネントにイベント リスナーをバインドするのは、ユーザー インタラクションに応答するためです。特定のインタラクティブなアクションがイベントをトリガーすると、リスニング関数が頻繁に実行されます。コンポーネントの特定の状態の値を操作し、ユーザーのクリック動作に応答フィードバックを提供する必要があります。開発者にとって、この関数がトリガーされると、このコンポーネントの排他的な状態コレクションを取得できる必要があります (たとえば、 , スイッチ コンポーネント ToggleButton の上記の例では、その内部状態属性

state.isToggleOn

の値は、ボタンが ON または OFF を表示することをマークするため、バインドされたリスナー関数の this は強制的にポイントされます。事例も分かりやすいです。 React コンストラクターのバインドは、応答関数をこのコンポーネント

Component

にバインドして、このハンドラー関数でこれを使用するときに、常にこのコンポーネントのインスタンスを指すことができるようにします。

4. これがバインドされていない場合

クラス定義にこのバインドへのポインタがない場合、ユーザーがクリックすると、

this.handleClick( ) がトリガーされます

このメソッドが実行されると、プロトタイプ メソッドが実際に実行されますが、影響はないようです。現在のコンポーネントのコンストラクターで state 属性が初期化されている場合、プロトタイプ メソッドが実行されるとき, this.stateインスタンスの state 属性が直接取得されます。state 属性が構築内で初期化されていない場合 (React の UI コンポーネントなど)、コンポーネントにその属性が存在しないことを意味します。現時点では、プロトタイプメソッドを呼び出しても効果はないようです。 実際、これは実際に当てはまります。ここで

bind(this)

が事前に回避したいのは、このポインタが見つからないという有名な問題です。 たとえば、ある属性メソッドを取得するために構造化代入を使用すると、参照変換でこれが失われるという問題が発生します。

const toggleButton = new ToggleButton();

import {handleClick} = toggleButton;

上記の例では、構造化して取得した handleClick メソッドエラーが報告されると割り当てが実行されます。クラスの内部は強制的に厳密モードで実行されます。これにより、割り当て内の元のポインタが失われ、実行時に未定義をポイントし、未定義には属性がありません。

もう 1 つの制限は、これにバインドされていない応答関数は、非同期実行時に問題を引き起こす可能性があることです。コールバック関数として非同期実行メソッドに渡されると、これも失われます。これはエラーを指します。

コンポーネントのインスタンスメソッドにこれを必須指定しないと、参照変換を安全に使用したり、将来使用する際にコールバック関数として渡すことができなくなり、その後の使用や共同開発に不便になります。

5. 概要

これは非常に柔軟に使用できますが、この柔軟性は多くの混乱も引き起こします。ここの bind(this) は、JavaScript の言語レベルの欠陥を改善するためのものです。これは React で必要なだけではありません。この問題はオブジェクト指向プログラミングで発生します。プラグインやフレームワークに JavaScript を使用する場合、この問題の影響は、開発中により明らかになるでしょう。言語レベルの欠陥と言われる理由は、Java で同じシナリオでこれを指摘する方が通常の思考ロジックに沿っているためですが、JavaScript でバインディングが表示されない場合、言語の操作結果とメソッドの名前は一貫性がなくなります。

関連する無料学習の推奨事項: JavaScript ビデオ チュートリアル

以上がなぜ反応がこれをバインドする必要があるのですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。