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

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

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

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

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

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

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

例 1: インラインを使用しない PureComponent Handler

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

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

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

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

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

ベスト プラクティス

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

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