thisをバインドする理由
該当ファンクションの実行時に、オブジェクトインスタンスを保つためです。最も一般的なケースは、メソッドを引き渡す時にthisをバインドする、というケースでしょう。
例えば…
Reactコンポーネントの汎用ボタンはデータモデルやアプリケーションの動きについての情報は何も持っていません。つまり、idやvalueなどのプロパティを持つべきではなく、特定の動作をするべきではありません。汎用ボタンは押せるだけ、です。
Pressハンドラが、ボタンが押された時に起きる動作を定義します。そのハンドラが必要な全ての情報を、より厳密に言うと、「this」内に持っています。ボタン自体は動作に何の価値も与えません。
それでは、特定のボタン、例えばArticleDetailsButtonの場合はどうでしょう？この場合も同じですが、ハンドラが定義される場所が異なります。
その他のバインドするケース
バインドするのはイベントハンドラのケースだけではありません。もし引き渡されるメソッドがthisをどのような方法であれ参照しているのであれば、thisは適切に使われている必要があります。例えば、comparatorやiteratorとしてメソッドが引き渡される時です。
例えばArticleDetailsScreenがarticleとtagsプロパティといった戻り値と結びつくと想像してみてください。この例では、articleは複数のtagIDを持ちます。目的は、articleコンテンツをタグタイトルと合わせて表示することです。
最後に…
Bindはパワフルなツールですが、bindを用いることでファンクションが複雑になります。なぜならコンテキストの一部が隠されてしまうからです。その点だけは覚えておきましょう。
※本稿は 「React — to Bind or Not to Bind」を翻訳・再編集したものです。
おすすめ新着記事
おすすめタグ