Zusammenfassung der 7 Fallstricke bei der Verwendung von React

React ist ein sehr beliebtes Front-End-Framework. Heute untersuchen wir sieben Punkte, auf die React-Entwickler achten sollten.

1. Komponentenaufblähung

React-Entwickler erstellen nicht die nötige Anzahl an Komponenten. Dieses Problem ist nicht auf React-Entwickler beschränkt, sondern betrifft auch viele Vue-Entwickler.

Natürlich sprechen wir jetzt über React.

In React können wir eine Komponente mit viel Inhalt erstellen, um unsere verschiedenen Aufgaben auszuführen, aber es ist am besten, die Komponenten kurz zu halten – eine Komponente ist mit einer Funktion verknüpft. Dies spart nicht nur Zeit, sondern hilft Ihnen auch, das Problem gut zu lokalisieren.
Beispielsweise die folgende TodoList-Komponente:

// ./components/TodoList.js

importiere React von „react“;

importiere { useTodoList } von '../hooks/useTodoList';
importiere { useQuery } von '../hooks/useQuery';
importiere TodoItem aus „./TodoItem“;
importiere NewTodo aus „./NewTodo“;

const TodoList = () => {
  const { getQuery, setQuery } = useQuery();
  const todos = useTodoList();
  zurückkehren (
    <div>
      <ul>
        {todos.map(({ id, title, abgeschlossen }) => (
          <TodoItem Schlüssel={id} id={id} Titel={Titel} abgeschlossen={abgeschlossen} />
        ))}
        <NeueAufgaben />
      </ul>
      <div>
        Abfrage für unvollständige Elemente hervorheben:
        <Eingabewert={getQuery()} beiÄnderung={e => setQuery(e.target.value)} />
      </div>
    </div>
  );
};

Standard-TodoList exportieren;

2. Ändern Sie den Status direkt

In React sollte der Status unveränderlich sein. Wenn Sie den Status direkt ändern, führt dies zu Leistungsproblemen, die nur schwer zu beheben sind.
Beispielsweise das folgende Beispiel:

const modifyPetsList = (Element, ID) => {
  HaustiereList[id].checked = element.target.checked;
  setzeHaustierliste(Haustierliste)
}

Im obigen Beispiel möchten Sie den aktivierten Schlüssel im Array-Objekt ändern. Allerdings besteht ein Problem: Da das Objekt mit derselben Referenz geändert wurde, kann React dies nicht erkennen und ein erneutes Rendern auslösen.

Um dieses Problem zu lösen, sollten wir die Methode setState() oder den Hook useState() verwenden.

Wir schreiben das vorherige Beispiel mit der Methode useState() neu.

const modifyPetsList = (Element, ID) => {
  const { geprüft } = element.ziel;
  setpetsList((Haustiere) => {
    returniere Haustiere.map((Haustier, Index) => {
      wenn (id === index) {
        pet = { ...Haustier, geprüft };
      }
      Haustier zurückgeben;
    });
  });
};

3. Die Props sollten einen numerischen Wert übergeben, aber es wird ein String übergeben und umgekehrt

Dies ist ein sehr kleiner Fehler und sollte nicht auftreten.
Beispielsweise das folgende Beispiel:

Klasse Arrival erweitert React.Component {
  rendern() {
    zurückkehren (
      <h1>
        Hallo! Du bist angekommen {this.props.position === 1 ? "first!" : "last!"} .
      </h1>
    );
  }
}

Hier ist === für die Zeichenfolge „1“ ungültig. Um dieses Problem zu lösen, müssen wir es beim Übergeben von Props-Werten mit {} umschließen.
Die Korrekturen lauten wie folgt:

// ❌
const-Element = <Ankunftsposition='1' />;

//✅
const element = <Ankunftsposition={1} />;

4. Schlüssel wird in der Listenkomponente nicht verwendet

Angenommen, wir müssen die folgenden Listenelemente rendern:

const lists = ['Katze', 'Hund', 'Fisch'];

rendern() {
  zurückkehren (
    <ul>
      {lists.map(Listennr. =>
        <li>{Listennummer}</li>)}
    </ul>
  );
}

Natürlich funktioniert der obige Code. Wenn die Liste groß ist und geändert werden muss, führt dies zu Darstellungsproblemen.

React verfolgt alle Listenelemente im Document Object Model (DOM). Es gibt keinen Datensatz, der React darüber informiert, was mit der Liste passiert ist.

Um dieses Problem zu lösen, müssen Sie Ihren Listenelementen Schlüssel hinzufügen. Schlüssel geben jedem Element eine eindeutige Identität, wodurch React feststellen kann, welche Elemente hinzugefügt, entfernt oder geändert wurden.
wie folgt:

<ul>
  {lists.map(Listennr. =>
    <li Schlüssel={Listennummer}>{Listennummer}</li>)}
</ul>

5. setState ist eine asynchrone Operation

Man vergisst leicht, dass der Status in React asynchron funktioniert. Wenn Sie versuchen, direkt nach dem Festlegen auf einen Wert zuzugreifen, können Sie den Wert möglicherweise nicht sofort abrufen.
Schauen wir uns das folgende Beispiel an:

handlePetsUpdate = (Anzahl der Haustiere) => {
  this.setState({ Haustieranzahl });
  this.props.callback(this.state.petCount); // Alter Wert
};

Sie können den zweiten Parameter von setState() verwenden, die Rückruffunktion, um damit umzugehen. Zum Beispiel:

handlePetsUpdate = (Anzahl der Haustiere) => {
  this.setState({ Haustieranzahl }, () => {
    this.props.callback(this.state.petCount); // Aktualisierter Wert
  });
};

6. Häufige Verwendung von Redux

In großen React-Apps verwenden viele Entwickler Redux, um den globalen Status zu verwalten.
Obwohl Redux nützlich ist, ist es nicht erforderlich, es zur Verwaltung aller Statuselemente zu verwenden.
Wenn unsere Anwendung keine Komponenten auf paralleler Ebene hat, die Informationen austauschen müssen, müssen dem Projekt keine zusätzlichen Bibliotheken hinzugefügt werden. Wenn wir beispielsweise den Status einer Formularschaltfläche in einer Komponente ändern möchten, geben wir der Statusmethode oder dem useState-Hook Priorität.

7. Komponentennamen beginnen nicht mit einem Großbuchstaben

In JSX werden Komponenten, die mit Kleinbuchstaben beginnen, zu HTML-Elementen herunterkompiliert.

Deshalb sollten wir Folgendes vermeiden:

Klasse demoComponentName erweitert React.Component {
}

Dies führt zu einem Fehler: Wenn Sie eine React-Komponente rendern möchten, muss diese mit einem Großbuchstaben beginnen.
Dann musst du es so schreiben:

Klasse DemoComponentName erweitert React.Component {
}

Nachwort

Der obige Inhalt ist ein Auszug aus den 10 häufigsten Fehlern, die bei der Verwendung von React zu vermeiden sind. Er verwendet einen Paraphrase-Ansatz, um 7 weitere praktische Inhalte zu extrahieren.

Damit ist dieser Artikel über 7 Fälle, in denen Fallstricke bei der Verwendung von React vermieden werden, abgeschlossen. Weitere relevante Fallstricke von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!