React の Render メソッドで Bind 関数と Inline Arrow 関数の使用を避けるべきなのはなぜですか?

Render メソッドのバインドおよびインライン矢印関数: 結果と代替

概要:

React では、メソッド バインディングまたはインライン アロー関数が render メソッド内で使用されている場合、レンダリング パフォーマンスに影響が出る可能性があります。これは、既存のメソッドを再利用する代わりに新しいメソッドの作成をトリガーする可能性があり、パフォーマンスが低下する可能性があるためです。

レンダー メソッドでのバインディングの回避:

バインディングを回避するにはrender メソッドの問題については、いくつかのアプローチがあります:

• コンストラクターでのバインディング: メソッドは、 this.methodName = this.methodName.bind( を使用してコンストラクターでバインドできます。 this);.
• プロパティ初期化子の構文: プロパティは、次のようにクラス内でアロー関数として直接初期化できます。 {...}.

バインディングで渡すパラメーターのアドレス指定:

バインディング内で追加のパラメーターを渡す場合、インラインを回避する代替アプローチがあります。 render メソッドのアロー関数:

• カスタム コンポーネントの作成: コンポーネント固有のロジックを別の子コンポーネントにラップし、必要な props を渡し、その中で onClick イベントを処理できます。 .
• 外側スコープでのアロー関数の使用: アロー関数は render メソッドの外側で定義でき、追加のパラメーターを引数としてそれらの関数に渡します。

コードサンプル:

上記の代替アプローチの実装例を次に示します:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  // Binding in constructor
  handleClick() {
    console.log("Constructor binding");
  }

  // Property initializer syntax
  deleteTodo = () => {
    console.log("Property initializer binding");
  };

  handleClickWithArgs = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  render() {
    // Arrow function in constructor (no extra parameters)
    return (
      <div onClick={this.handleClick}>
        {" "}
        Click Me Constructor Binding{" "}
      </div>
    );
  }
}

function App() {
  const todos = ["a", "b", "c"];

  // Using arrow functions in the outer scope
  const handleDeleteTodo = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  return (
    <div>
      {todos.map((el) => (
        <MyComponent key={el} onClick={handleDeleteTodo} />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

以上がReact の Render メソッドで Bind 関数と Inline Arrow 関数の使用を避けるべきなのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。