JSX Props でアロー関数とバインドがパフォーマンスの問題を引き起こすのはなぜですか?

最適なパフォーマンスのためにアロー関数を回避し、JSX Props にバインドする

React の lint ツールは、潜在的な問題を強調することでコードの実践を強化することを目的としています。よくあるエラー メッセージの 1 つは、「JSX プロパティではアロー関数を使用しないでください」です。これは、JSX プロップ内でアロー関数またはバインドを使用することの悪影響を指摘しています。

アロー関数とバインドがパフォーマンスを妨げる理由

アロー関数またはバインドを JSX プロップに組み込むと、パフォーマンスへの影響:

• ガベージ コレクション: アロー関数が作成されるたびに、前の関数は破棄されます。複数の要素がインライン関数でレンダリングされる場合、アニメーションが途切れ途切れになる可能性があります。
• レンダリング: インライン矢印関数は、PureComponents および shouldComponentUpdate メソッドを使用するコンポーネントで使用される浅い比較メカニズムを妨げます。アロー関数の prop は毎回再作成されるため、prop の変更として検出され、不要な再レンダリングがトリガーされます。

再レンダリングに対するインライン ハンドラーの影響

考慮してくださいこれらの例:

例 1: インライン ハンドラーを使用しない PureComponent

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return <button onClick={onClick}>Click</button>;
  }
}

このコードでは、PureComponent で予期されるように、Button コンポーネントはプロパティが変更されたときにのみ再レンダリングされます。 .

例 2: インライン ハンドラーを使用した PureComponent

const Button = (props) => {
  console.log('render button');
  return <button onClick={() => props.onClick()}>Click</button>;
};

インライン アロー関数により、コンポーネントの状態が変化しない場合でも、Button は毎回再レンダリングされるようになりました。この不要な再レンダリングは、パフォーマンスに大きな影響を与える可能性があります。

ベスト プラクティス

これらのパフォーマンスの問題を回避するには、次のベスト プラクティスに従うことをお勧めします。

• JSX の外部でイベント ハンドラーを定義します: アロー関数を抽出するか、メソッドを別の変数宣言にバインドします。
• このバインディングを使用します: クラス コンポーネントの場合は、イベントをバインドします
• 高階関数を使用する: JSX でのイベント処理をより効率的にするには、map や bindingActionCreators などの高階関数の使用を検討してください。

以上がJSX Props でアロー関数とバインドがパフォーマンスの問題を引き起こすのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。