JSX Props でアロー関数やバインドの使用を避けるべき理由は何ですか?

JSX Props でのアロー関数またはバインドの使用を避ける

それが悪い習慣である理由:

JSX プロパティでのアロー関数またはバインドの使用は、パフォーマンスに悪影響を与えるため推奨されません。理由は次のとおりです:

• 非効率なガベージ コレクション: レンダリングごとに関数を作成すると、コンポーネントがアンマウントされるときに不要なガベージ コレクションがトリガーされます。
• レンダリングによるもの浅い比較: PureComponents と shouldComponentUpdate() でshallowCompareを使用するコンポーネントは、プロップ値が変更されていない場合でも再レンダリングされます。これは、インライン関数のプロップが毎回再作成されるためです。

例:

インライン矢印機能なし:

<Button onClick={() => console.log('clicked')} />

他のプロパティが変更されない限り、ボタンは再レンダリングされません。

インライン矢印あり機能:

<Button onClick={this.handleClick} />

ハンドラーが同じであっても、コンポーネントがレンダリングされるたびにボタンが再レンダリングされます。

ベスト プラクティス:

これらのパフォーマンスの問題を回避するには、JSX の外部でアロー関数またはバインドされたメソッドを宣言します。

class Button extends React.Component {
  handleClick = () => {
    // Handler logic
  };

  render() {
    return <button onClick={this.handleClick} />;
  }
}

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