React イベント バインディングのいくつかのメソッドを共有する

この記事では主に React 学習におけるイベント バインディングのいくつかの方法の比較をサンプル コードを通じて詳しく紹介します。この記事は、皆さんの学習や作業に役立つことを願っています。 React イベントのバインディング メソッドについての理解を深める。

Reactイベントのバインディング

クラスメソッドはデフォルトではバインドしないので、呼び出し時にバインドし忘れるとthisの値が不定になります。

通常、直接呼び出されない場合、これはメソッドにバインドされる必要があります。いくつかのバインド方法があります:

1. コンストラクター内でバインドを使用します

class Button extends React.Component {
constructor(props) {
 super(props);
 this.handleClick = this.handleClick.bind(this);
 }
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

2. 呼び出し時にバインドを使用してバインドします

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick.bind(this)}>
  Click me
  </button>
 );
 }
}

3. これを定義する

class Button extends React.Component {
 handleClick(){
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>this.handleClick()}>
  Click me
  </button>
 );
 }
}

4. プロパティ初期化構文を使用してこれをバインドします (実験的)

class Button extends React.Component {
 handleClick=()=>{
 console.log('this is:', this);
 }
 render() {
 return (
  <button onClick={this.handleClick}>
  Click me
  </button>
 );
 }
}

比較

メソッド 2 と 3 はどちらも呼び出し時にこれをバインドします。

• 利点: メソッドの記述は比較的単純です。コンポーネントに状態がない場合、これをバインドするためのクラス コンストラクターを追加する必要はありません。

• 欠点: 毎回新しいメソッド インスタンスが生成されます。が呼び出されるため、パフォーマンスに悪影響を及ぼします。 影響があり、この関数がプロパティ値として低レベルのコンポーネントに渡されると、新しいメソッド インスタンスが渡されるたびに、これらのコンポーネントで追加の再レンダリングが行われる可能性があります。新しい物件として。

メソッド 1 これをクラスのコンストラクターでバインドします。呼び出し時に再度バインドする必要はありません。

• 利点: メソッド インスタンスは 1 つだけ生成され、一度バインドした後はこのメソッドを複数回使用する必要はありません。もう一度結びます。

• 短所: 状態が使用されない場合でも、これをバインドするためにクラス コンストラクターを追加する必要があり、もう少しコードが必要になります。 。 。

方法 4: 属性初期化構文を使用してメソッドをアロー関数として初期化し、これが関数の作成時にバインドされるようにします。

• 利点: メソッドの作成時にこれをバインドします。クラスのコンストラクターでバインドする必要はなく、呼び出し時に再度バインドする必要もありません。方法 1、方法 2、および方法 3 の利点を組み合わせる

• 欠点: まだ実験的な構文であり、babel で翻訳する必要があります

関連推奨事項:

jQuery イベント バインディング関数の基本的な説明

jQueryで実装される基本的なイベントバインディング機能の詳細説明

ES6のJavaScriptで実装される関数バインディングとクラスイベントバインディング機能の詳細説明

以上がReact イベント バインディングのいくつかのメソッドを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。