ホームページ > 記事 > ウェブフロントエンド > React イベントバインディングのいくつかのメソッドを共有する

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

小云云オリジナル: 2018-02-02 13:10:341402ブラウズ

この記事では主に 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 で翻訳する必要があります

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

関連記事

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