Reactコンポーネントの属性の匿名関数はどのように機能しませんか？

Question

反応属性で匿名関数を使用することは想定されていません。

<a onClick=()=>doIt('myId')>Aaron</a> 

その匿名関数は、すべての上に再作成されているので、これはのリアクト和解のためのパフォーマンスの問題を作成し、なぜ私が理解を渡しので、常にいくつかの種類のレンダリング再本当のDOMをトリガしますレンダリング。私の質問は、小さなコンポーネント（つまり、すべての行にリンクがある表ではない）の場合、これは重要ではないのですか？ Reactは、DOMを再レンダリングするのではなく、ハンドラを置き換えるだけで十分です。だからコストはそれほど高くないのですか？

Answer 1

あなたのJSXのコードサンプルは、実際にこのようになります。このような匿名の脂肪の矢印機能を使用して

<a onClick={()=>doIt('myId') }>Aaron</a> 

は完全に有効です。 はであり、反応属性で匿名関数を使用することになっています。 それは大丈夫ですです。

はい、それはであり、ベストプラクティスではありませんです。 the this context issue when using the ES6 class extends React.Component syntaxを解決したい場合は、クラスコンストラクタで関数をバインドすることをお勧めします。

いいえ、「小さな」コンポーネント（すべての行にリンクがある表ではありません）では、これはわずかなパフォーマンスの問題ではありません。あなたは安全です。

Answer 2

レンダリングでAnonymous functionとFunction.bind(this)を使用すると、新しいレンダリングがトリガーされることを通知する必要があります。これは、両方とも

doIt.bind(this, 'myId') === doIt.bind(this, 'myId') // false 

AND 

() => doIt('myId') ===() => doIt('myId') // false 

が偽であるためです。

何かを関数にバインドする場合は、Reactクラスのメソッドでpartialアプリケーションを使用します。

• 小さな部品：あなたは大丈夫です（ほとんどないパフォーマンスの問題）
• 大型部品：深いあなたよりはそれをで

を回避しようと取得のために

class myComponent extends Component { 

    doIt = (id) =>() => { 
    // Do Something 
    } 

    render() { 
    <div> 
     <a onClick={this.doIt('myId')}>Aaron</a> 
    </div> 
    } 
} 

Answer 3

React documentation about event handling、あなたは見つけることができます：

ほとんどの場合、これは問題ありません。ただし、このコールバックがコンポーネントの下位コンポーネントとして渡された場合、それらのコンポーネントは余分な再レンダリングを行う可能性があります。このようなパフォーマンス上の問題を避けるため、コンストラクタでバインドするか、クラスフィールドの構文を使用することをお勧めします。

---

注：他の小道具とは異なるコールバックの小道具を処理していない反応します。それは常に古いものと新しいものを比較します。したがって、匿名関数が存在する場合には、匿名関数が常に新しく作成されるため、再レンダリングされます。