Wie vermeide ich Leistungsprobleme beim Binden oder Inlining von Pfeilfunktionen in der Render-Methode von React?

So vermeiden Sie Bindungs- oder Inline-Pfeilfunktionen innerhalb der Render-Methode

In React-Komponenten ist es wichtig, Bindungs- oder Inline-Pfeilfunktionen innerhalb der Render-Methode zu vermeiden, um die Leistung zu optimieren . Beim erneuten Rendern werden neue Methoden erstellt, anstatt die alten wiederzuverwenden, was zu Leistungsproblemen führt.

Betrachten Sie das folgende Beispiel:

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

Um dies zu beheben, können wir den _handleChange binden Methode im Konstruktor:

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

Oder alternativ können wir den Eigenschaftsinitialisierer verwenden Syntax:

_handleChange = () => {};

Es treten jedoch Herausforderungen auf, wenn wir zusätzliche Parameter an den onClick-Handler übergeben müssen. In einer Aufgaben-App müssen wir beispielsweise möglicherweise ein Element basierend auf seinem Index oder Namen aus einem Array löschen.

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

Dieser Ansatz erstellt bei jedem Rendern einer Komponente einen neuen Rückruf, wie in der Dokumentation erwähnt .

Alternativen zur Bindung innerhalb der Render-Methode

1. Erstellen Sie eine untergeordnete Komponente:

Verschieben Sie den Inhalt innerhalb der Kartenfunktion in eine separate untergeordnete Komponente und übergeben Sie die Werte als Requisiten. Auf diese Weise kann die Funktion von der untergeordneten Komponente aufgerufen werden und den Wert an die als Requisiten weitergegebene Funktion übergeben.

Übergeordnetes Element:

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

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

Untergeordnete Komponente (MyComponent):

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

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

Beispiel Snippet:

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'));

Durch die Implementierung dieser Alternativen können wir das Binden oder Inlining von Pfeilfunktionen innerhalb der Rendermethode vermeiden und so die ordnungsgemäße Leistung und Wiederverwendbarkeit der Komponente sicherstellen.

Das obige ist der detaillierte Inhalt vonWie vermeide ich Leistungsprobleme beim Binden oder Inlining von Pfeilfunktionen in der Render-Methode von React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!