React performance：bindと匿名関数の比較

Question

bindとReactコンポーネントでの匿名関数の使用のパフォーマンスに違いがあるかどうかを知りたいと思います。

具体的には、次のいずれかのパフォーマンスが他のパフォーマンスより優れていますか？

const MyComponent = ({ myHandler }) => { 
    ... 
    return (
    <a onClick={myHandler.bind(this, foo, bar)} ...> 
     hello world 
    </a> 
); 
} 

const MyComponent = ({ myHandler }) => { 
    ... 
    return (
    <a 
     onClick={() => { 
     myHandler(this, foo, bar) 
     } 
     ... 
    > 
     hello world 
    </a> 
); 
} 

が重複する可能性の質問への答えは、メモリフットプリントに焦点を当てているため、この問題は、重複する可能性は異なっています。

Answer 1

まず第一に、あなたはあなたの質問を設定する方法が少しerraneousです：

あなたの最初の例<a onClick={myHandler.bind(this, foo, bar)} ...>は、それぞれそれがコンポーネントのコンテキストにバインドし、常にfooとbarなどがありますされてレンダリングに新しい関数を作成します最初の2つの引数。

あなたの第二の例<a onClick={() => myHandler(this, foo, bar)} ...>ではなく、これはコンポーネントコンテキストを表しmyHandler 3と引数、this、fooとbarを呼び出します。

理論的なレベルでは、2つの概念について議論しています。新しい匿名バインド関数を作成してその関数を呼び出すよりも高価な関数にバインドするのは、thisですか？私は両方のアプローチがパフォーマンスの観点から非常に似ていると言います：両方の場合に新しい関数（func.bind docs）を作成しています。

パフォーマンスの差が小さいため、パフォーマンスが重視されるこのようなソフトウェアは開発されません。() => {}とbindのいずれかを選択すると問題が発生します。

ここでパフォーマンスを向上させる場合は、classを使用し、クリックハンドラをconstructorのコンテキストにバインドすることを選択します。そうすれば、レンダリングするたびに新しい関数を作成する必要はありません。

希望します。

Answer 2

違いがある場合、その差は非常に小さく、測定可能な場所でテストを行うことができれば非常に驚くことでしょう。あなたと同じコードベースの他の人が理解しやすいバージョンで行ってください。