Javascriptの6つの方法、react、es6＆es7のこのキーワード

キーポイント

• JavaScriptのthisキーワードは、特にコールバック関数内で混乱を招く可能性があります。 reactでは、thisコンポーネントのコンテキストを参照します。これは、関数コンテキストがシフトすると問題を引き起こす可能性があります（例：Promise Callbacks）。
バインディングを管理するためのいくつかの方法が存在します：トップレベルの参照（Alias this）の作成、実行時に正しいコンテキストを注入（これを結合）、ES2015矢印関数を使用してReactコンポーネントメソッドを活用し、ES2016を使用します構文を結合する（サポートされている場合）、または明示的な
• 引数を受け入れるメソッドを使用します。 this最適な方法は、パフォーマンス、デバッグの容易さ、個人的な好みなどの要因に依存します。 エイリアシングthisはパフォーマンスを優先します。コンポーネントメソッドまたは名前付き関数は、デバッグを改善します。矢印関数は、短いインライン関数の場合は簡潔です。this
• javascriptのthisキーワードは、頻繁に開発者をつまずかせます。厳格なクラスモデルを持つ言語とは異なり、その動作は常に予測可能ではありません。特に、コールバック機能がコントロールを超えているコールバック関数です。 外部コードは、
または

呼び出しをもたらします。 問題this newコンポーネントコンテキストを参照するためのFunction.prototypeの使用の使用は、このあいまいさを継承します。 この一般的な反応パターンを考慮してください：.bind(this)

これはa thisを生成します。

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

TypeErrorこれらのソリューションは、確立されたJavaScript技術から、反応固有の方法や新しい（潜在的にサポートされていない）機能にまで及びます。 this.setStatethis1。エイリアスこれは

参照を作成することが含まれます。 シンプルで理解しやすい、これは正しいコンテキストの明確な視覚的保証を提供します。直感に反するように見えますが、それは効果的で簡単です。

this2。これをバインドします

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

このメソッドは、実行時に正しいコンテキストをコールバックに注入します：

すべてのJavaScript関数には、を指​​定するメソッドがあります。 バインドされると、コンテキストをオーバーライドすることはできず、正しいオブジェクトを参照することを確認します。 ただし、このアプローチは読みやすくなく、深くネストされた非同期コードで面倒になり、各機能の手動バインディングが必要です。

3。コンポーネントの反応

Reactコンポーネントにより、thisを使用すると、正しいReact.createClassコンテキストに自動的にバインドされるメソッドを定義できます。 これにより、コールバックロジックをコンポーネントに移動することができます：

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
});

シンプルなコンポーネントの場合、これによりクリーンなコードが促進され、コンテキストの懸念が排除されます。 このオート凝視はならあなたに警告します。.bind(this)

4。 ES2015矢印関数

const component = this;
component.setState({ loading: true });

fetch('/').then(function loaded() {
  component.setState({ loading: false });
});

this.setState({ loading: true });

fetch('/').then(function loaded() {
  this.setState({ loading: false });
}.bind(this));

React.createClass({
  componentWillMount: function() {
    this.setState({ loading: true });
    fetch('/').then(this.loaded);
  },
  loaded: function loaded() {
    this.setState({ loading: false });
  }
});