Vermeiden unnötiger erneuter Renderings bei der Reaktion mit mehreren Zuständen

Es ist üblich, Zustände zu verwenden, um verschiedene Teile der Schnittstelle zu steuern. Wenn sie jedoch nicht richtig verwaltet werden, können mehrere Zustände zu unnötigen erneuten Renderings führen und die Systemleistung beeinträchtigen.

Problem: Zu viele Zustände === Zu viele erneute Renderings

Stellen wir uns vor, wir hätten eine Komponente, die die Daten eines Benutzers verwaltet. Wir können diese Zustände unabhängig voneinander deklarieren, etwa so:

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

Hier haben wir 6 unabhängige Zustände. Jedes Mal, wenn einer dieser Zustände aktualisiert wird, wird die gesamte Komponente neu gerendert. Stellen Sie sich nun vor, wir müssten die 6 Zustände aktualisieren ... ja, wir rendern diese Komponente 6 Mal.

Lösung: Erstellen Sie nur 1 Status bezüglich Benutzerinformationen

Eine Möglichkeit, dieses Problem zu mildern, besteht darin, alle Zustände in einem einzigen Objekt zu konsolidieren. Anstatt separate Zustände zu haben, können wir alle Benutzerinformationen in einem Zustand behalten, das würde so aussehen:

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

Jetzt haben wir statt einer Funktion für jeden Status die Funktion updateUser, die nur die gewünschten Änderungen empfängt und diese mithilfe des Spread-Operators (...) mit dem vorherigen Status kombiniert. Dadurch können Sie nur einen Teil des Status aktualisieren, während der Rest unverändert bleibt.

Wenn Sie nur eine Information über das Objekt ändern möchten, gehen Sie wie folgt vor:

setUser((prevState) => ({...prevState, age: 25}))

Unterschied

Wenn wir separate Zustände verwenden, führt jede einzelne Zustandsänderung zu einem erneuten Rendern der Komponente. Wenn wir alle Zustände in einem einzigen Objekt konsolidieren, müssen wir immer noch ein einziges erneutes Rendern durchführen, das jedoch nur einmal erfolgt, selbst wenn sich mehrere Teile des Objekts ändern.

Vorteile

- Reduzierung von Neu-Renderings: Durch die Konsolidierung von Zuständen vermeiden wir mehrere unnötige Neu-Renderings und verbessern so die Leistung.
- Einfachere Wartung: Es ist einfacher, Benutzerinformationen in einem einzigen Zustand zu verwalten, wodurch der Code vereinfacht und besser lesbar wird.
- Teilweise kontrollierte Aktualisierungen:Wir können nur die Teile des Status ändern, die geändert werden müssen, ohne den Rest zu berühren.

Das ist es! Ich hoffe, ich habe geholfen!!!
Ich bin zwar noch in der Entwicklung, aber hier ist mein Portfolio: https://lucaslima.vercel.app (Ich hoffe, dass es fertig ist, wenn Sie darauf zugreifen, hahhaha)

Erfolg! ?

Das obige ist der detaillierte Inhalt vonVermeiden unnötiger erneuter Renderings bei der Reaktion mit mehreren Zuständen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!