Reactからthisを結びつけて、JS言語の発展とフレームデザインを見ます.

javascript言語では、thisというキーワードに関する行動は、次世代の初級開発者を悩ませてきました.同時にthis、javascriptの怪しいことと柔軟さを十分に反映しました.
しかし、誤解しないでください.この文章はthisの特徴を全面的に説明することはできません.これらの内容はすべて先端の本の中で答えを見つけることができます.ここで、私はReactイベントハンドリング関数と関連して、thisバインディングの進化史についてお話したいです.このフレームワークの設計とjavascript言語のこの細部における進歩と完備についてお話したいです.同時にthisバインディングの異なった方案を比較して、みんなにReact、ES nextに対して1つの更にはっきりしている認識があらせます.
Reactがthisの文脈環境を処理するのは少なくとも5年の歴史があります.五年間、方案が次々と出てきます.まずまとめてみます.
方法1:React.create Class自動バインディング
Reactの中でコンポーネントを作る方法はもう多くなりました.比較的古いのはReact.create Classのような人が多いはずです.もちろん、React 0.13から、ES 6クラスをReact.createClassの代わりに使うことができます.これは今後のオススメです.しかし、React.createClassが作成したコンポーネントは、自動的にthisをバインドすることができます.つまり、thisというキーワードはコンポーネント・インスタンスの上に自動的に結合されます.

// This magically works with React.createClass
// because `this` is bound for you.
onChange = {this.handleChange}

残念ながら、公式は、コンポーネントの作成に対して、class宣言コンポーネントまたはfunctional無状態コンポーネントの使用を推奨しています.
Later、clases were added to the landage as part of ES 2015、so we added the ability to create React compnents JavaScript clases.Along with functions components、JavaScript clast the the prewarrapt
For your existing createClass components、we recommand that you migrate them to JavaScript clases.
これは実はReactフレームワーク自体の自己改善と未来への迎合であり、フレームワークと言語発展の大勢の赴くところであると思います.
方法二:レンダリング時のバインディング
前の文では、最も伝統的なコンポーネントの作成方法はthisバインディングの悩みがないことを知っています.次に、すべてのコンポーネントがES 6クラスで声明されていると仮定します.この場合、thisは自動的にバインディングできません.よくある解決策は、

onChange = {this.handleChange.bind(this)}

この方法は簡単で要を得ているが、コンポーネントが再レンダリングされるたびに新しい関数が作成される潜在的な性能問題がある.OMGこれは大きな問題のように見えますが、実際に開発されたシーンでは、性能の問題はあまり問題になりません.
方法3:矢印関数バインディング
この方法は実は第二のものと類似しています.ES 6矢印関数によって与えられたもので、thisを暗黙的に結合することができます.

onChange = {e => this.handleChange(e)}

もちろん,第二の方法と同様に,潜在的な性能問題も存在する.以下で紹介する2つの方法は、不必要な性能の消耗を効果的に回避することができます.引き続き読んでください.
方法四:コンストラクタ内のバインディング
constructorメソッドは、カテゴリのデフォルトの方法であり、newコマンドによりオブジェクトインスタンスを生成する場合、自動的に起動します.
だから私たちはいいです.

constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
}

この方法はよく「ベストプラクティス」として紹介されますが、筆者が最もよく使う方法です.
しかし、個人の習慣としては、前の2つの方法と比べて、constructor内で可読性とメンテナンス性に結びつけられているのはちょっと足りないかもしれないと思います.同時に、constructorによって宣言された方法はインスタンスの原型にはなく、インスタンス自体の方法に属することを知っています.各例には同じハンドルChangeがあります.これ自体も繰り返しと浪費です.
ES nextに対していつも開放的な考えを持っていて、stage-2の特性を使って、最後の方案を試してみてもいいです.
方法5:クラス属性の中で=と矢印関数を使います.
この方法はES nextの新しい特性に依存します.tc 39:Public Class Fieldsを参照してください.

handleChange = () => {
      // call this function from render 
      // and this.whatever in here works fine.
};

この方法の長所をまとめます.

矢印関数を使用して、thisを効果的に結合しました.

は、第二の方法と第三の方法の潜在的な性能問題がない.

は、方法4のコンポーネント・インスタンスの重複問題を回避する.

私達は直接ES 5 createClassから再現できます.

締め括りをつける
本論文では、Reactバインディングthisの5つの方法を比較しながら、Javascript言語の発展を遠くから知ることができました.ES 5のbindからES 6の矢印関数まで、ES nextのclassに対する改善です.
Reactは盛んな発展の枠組みとして時とともに具現し、絶えず完備され、言語特性の発展に合わせて絶えず自身を調整しています.
最後に、私達はこの写真を通して完全に振り返ります.
本論文はCory Houseの記事を参照している.5 Appproaches for Handling thisは、この基礎の上に拡張されている.
私の他のいくつかのReact記事:

Reactコンポーネント設計と分解思考

Uberモバイルのウェブページのバージョンをしますまだ十分ではない極致の性能はやっと本物の章の

に会います.

解析Twitter先端アーキテクチャ学習複雑なシーンデータ設計

React Conf 2017乾物まとめ1:React+ES next=♥

React+Reduxが作成した「NEWS EARLY」の単一ページにプロジェクトを適用して、最前線技術スタックの真の意味を理解します.

react+redux工程例

…

Happy Coding
PS:著者Github倉庫、コードを通じて様々な形で交流することを歓迎します.