React の Render メソッドでアロー関数をバインドまたはインライン化するときにパフォーマンスの問題を回避するにはどうすればよいですか?

Render メソッド内でアロー関数のバインドまたはインライン化を回避する方法

React コンポーネントでは、パフォーマンスを最適化するために、Render メソッド内でアロー関数のバインドまたはインライン化を避けることが重要です。再レンダリング中に、古いメソッドを再利用する代わりに新しいメソッドが作成されるため、パフォーマンスの問題が発生します。

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

<input onChange={this._handleChange.bind(this)} />

これに対処するには、_handleChange をバインドできます。コンストラクター内のメソッド:

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

または、プロパティ初期化子を使用することもできます。構文:

_handleChange = () => {};

ただし、追加のパラメーターを onClick ハンドラーに渡す必要がある場合に問題が発生します。たとえば、ToDo アプリでは、インデックスまたは名前に基づいて配列から項目を削除する必要がある場合があります。

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}>{el}</div>)

ドキュメントで説明されているように、このアプローチでは、コンポーネントのレンダリングごとに新しいコールバックが作成されます。 .

Render メソッド内でのバインディングの代替手段

1.子コンポーネントを作成します:

マップ関数内のコンテンツを別の子コンポーネントに移動し、値を props として渡します。このようにして、子コンポーネントから関数を呼び出し、props として渡された関数に値を渡すことができます。

親:

deleteTodo = (val) => {
  console.log(val);
};

todos.map((el) => <MyComponent val={el} onClick={this.deleteTodo} />);

子コンポーネント(MyComponent):

class MyComponent extends React.Component {
  deleteTodo = () => {
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this.deleteTodo}>{this.props.val}</div>;
  }
}

サンプル スニペット:

class Parent extends React.Component {
  _deleteTodo = (val) => {
    console.log(val);
  };

  render() {
    var todos = ['a', 'b', 'c'];
    return (
      <div>
        {todos.map((el) => (
          <MyComponent key={el} val={el} onClick={this._deleteTodo} />
        ))}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  _deleteTodo = () => {
    console.log('here');
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this._deleteTodo}>{this.props.val}</div>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

これらの代替手段を実装することで、レンダー内でのアロー関数のバインドやインライン化を回避できます。メソッドを使用して、コンポーネントの適切なパフォーマンスと再利用性を確保します。

以上がReact の Render メソッドでアロー関数をバインドまたはインライン化するときにパフォーマンスの問題を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。