JSX Props でのアロー関数またはバインドの使用が禁止されている理由

React を使用する場合は、アロー関数やバインドの使用を避けることが重要です。 JSX プロパティのバインディング。この方法を実行すると、パフォーマンスの問題や不正な動作が発生する可能性があります。

パフォーマンスの問題

JSX プロップ内でアロー関数またはバインディングを使用すると、レンダリングのたびにこれらの関数が強制的に再作成されます。これは、次のことを意味します。

• 古い関数は破棄され、ガベージ コレクションがトリガーされます。
• 多くの要素を継続的にレンダリングすると、パフォーマンスにジッターが発生する可能性があります。
• PureComponents に依存するコンポーネントまたは、アロー関数 prop.

の変更により、 shouldComponentUpdate が依然として再レンダリングをトリガーします。動作

次の例を考えてみましょう:

onClick={() => this.handleDelete(tile)}

このコードは、それぞれに新しい関数を作成します。これにより、React はコンポーネントをダーティとしてマークし、再レンダリングをトリガーします。タイル プロップが変更されていない場合でも、矢印関数が異なるため、コンポーネントは再レンダリングされます。

ベスト プラクティス

これらの落とし穴を回避するには、次のベスト プラクティス:

• イベント ハンドラーをコンストラクター:

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

• レンダリング メソッドの外側にアロー関数を作成します:

const handleDelete = tile => {
  // Handle delete logic
};

追加の注意:

アロー関数は、render メソッド内など、コンポーネントの他の部分で使用する場合にはまったく問題ないことに注意することが重要です。ただし、イベント ハンドラーを JSX props に割り当てる場合は、これらを回避する必要があります。