JSX Props でアロー関数やバインディングを避けるべき理由は何ですか?

JSX Props でのアロー関数やバインドの使用がダメな理由

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

パフォーマンスの問題

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

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

不正な動作

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

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

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

ベスト プラクティス

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

• コンストラクターでイベント ハンドラーをバインドします:

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

• 外部にアロー関数を作成しますrender メソッドの:

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

追加の注意:

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

以上がJSX Props でアロー関数やバインディングを避けるべき理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。