JSX属性のLambdaはアンチパターンですか？

Question

今日は新しいリンターを使用して開始（tslint反応し）、それは私に次のような警告を与えている：

私はこの原因ことを得る

「ラムダは、そのレンダリングパフォーマンスへの影響にJSXの属性禁じられています」各レンダリングで作成される新しい関数。また、子コンポーネントはそれが変更された小道具だと思うので、不要な再レンダリングを引き起こす可能性があります。

しかし、私の質問はこれです、どのように他することができますループ内のイベントハンドラに1つのパスパラメータ：

customers.map(c => <Btn onClick={() => this.deleteCust(c.id) } />); 

Answer 1

絶対にありませんアンチパターン。

ラムダ（矢印機能）は、レンダリングのパフォーマンスに影響を与えません。

影響があるのはshouldComponentUpdateの実装だけです。この関数はデフォルトでtrueを返します。つまり、コンポーネントは常にレンダリングされます。これは、たとえ小道具が変わらなくても、コンポーネントはまだレンダリングされていることを意味します。それがデフォルトの動作です。

shouldComponentUpdateを実装していない場合、矢印関数をバインドされたメソッドに変更しても、パフォーマンスは向上しません。

矢印機能を使用しないとshouldComponentUpdateの実装を簡略化でき、PureComponentでは使用しないでくださいが、反パターンではありません。彼らは多くのパターンを単純化することができます。関数に追加のパラメータを追加するとき（たとえば、あなたの例で何をしているか）

ReactにはshouldComponentUpdateも実装できないステートレスコンポーネントがあり、常にレンダリングされることにも注意してください。

実際にパフォーマンスの問題が見つかるまで、パフォーマンスの影響は考慮しないでください。