Warum sollten Sie Inline-Pfeilfunktionen in React-Render-Methoden vermeiden?

Inline-Pfeilfunktionen in Rendermethoden vermeiden

Es wird empfohlen, Inline-Pfeilfunktionen wie this._handleChange.bind(this) innerhalb zu vermeiden die Rendermethode einer React-Komponente.

Grund:

Während des erneuten Renderns erstellt React neue Methoden, anstatt die alten wiederzuverwenden. Dies kann sich negativ auf die Leistung auswirken, indem es unnötige Funktionserstellung und Speicherzuweisung verursacht.

Alternativen:

Es gibt mehrere Möglichkeiten, bindende Pfeilfunktionen innerhalb der Rendermethode zu umgehen:

1. Konstruktorbindung:

• Binden Sie die Methode im Konstruktor: this._handleChange = this._handleChange.bind(this);

• Beispiel:

  class MyClass extends React.Component {
     constructor(props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
     }
  
     _handleChange() {
        // ...
     }
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

2. Syntax des Eigenschaftsinitialisierers:

• Definieren Sie die Methode mithilfe der Syntax des Eigenschaftsinitialisierers: _handleChange = () => { ... };

• Beispiel:

  class MyClass extends React.Component {
     _handleChange = () => {
        // ...
     };
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

3. Ereignisbehandlung mit Callback-Funktionen:

• Erstellen Sie eine separate Callback-Funktion, die die notwendigen Argumente empfängt:

• Beispiel:

  class MyClass extends React.Component {
     handleDeleteTodo = (todo) => {
        // ...
     };
  
     render() {
        return todos.map((todo) => (
           <div key={todo}>
              <input onChange={this.handleDeleteTodo.bind(this, todo)}>
              {todo}
           </div>
        ));
     }
  }

4. Komponentenbezogene Pfeilfunktionen:

• Deklarieren Sie die Pfeilfunktion außerhalb der Rendermethode, aber innerhalb des Komponentenklassenbereichs:

• Beispiel:

  class MyClass extends React.Component {
      _handleDeleteTodo = (todo) => {
         // ...
      };
  
      render() {
         return todos.map((todo) => (
            <div key={todo} onClick={this._handleDeleteTodo.bind(this, todo)}>
               {todo}
            </div>
         ));
      }
  }

5. Externe Ereignishandler:

• Verschieben Sie die Ereignisbehandlungslogik in eine externe Komponente oder eine Hilfsfunktion, um eine Bindung innerhalb der Rendermethode zu vermeiden:

• Beispiel:

  const handleDeleteTodo = (todo) => {
     // ...
  };
  
  class MyClass extends React.Component {
     render() {
        return todos.map((todo) => (
           <MyComponent todo={todo} onDelete={handleDeleteTodo} />
        ));
     }
  }
  
  class MyComponent extends React.Component {
     render() {
        return <div onClick={this.props.onDelete.bind(this, this.props.todo)}>{this.props.todo}</div>;
     }
  }

Diese Alternativen bieten effiziente Methoden zur Verarbeitung von Ereignissen innerhalb von React-Komponenten, ohne die Leistung zu beeinträchtigen oder unnötige Funktionsbindungen einzuführen.

Das obige ist der detaillierte Inhalt vonWarum sollten Sie Inline-Pfeilfunktionen in React-Render-Methoden vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!