【効率が良いほうを採用したい…】React-Bindをするべき？しないべき？

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」を翻訳・再編集したものです。