Reaktionskomponenten: Klasse vs. Funktional.

Meine React-Reise begann vor vier Jahren mit funktionalen Komponenten und Hooks. Dann kam 'Siswe, eine Mitteilnehmerin des Bootcamps und unsere begeisterte Klassenkameradin. Während der Rest von uns an Teamprojekten mit funktionalen Komponenten zusammenarbeitete, klammerte sich Siswe mit unerschütterlicher Loyalität an die Klassenkomponenten.

Komponenten sind die Bausteine ​​Ihrer Benutzeroberfläche (UI).

Betrachten Sie sie als Legosteine ​​– Sie können sie auf verschiedene Arten kombinieren, um komplexe Strukturen zu schaffen. Es handelt sich um unabhängige und wiederverwendbare Codeteile, die Benutzeroberfläche und Logik kapseln.

Die Wiederverwendung einer Komponente innerhalb einer anderen Komponente sieht normalerweise so aus:

import MyComponent from './MyComponent';

function ParentComponent() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

Klassenkomponenten und Funktionskomponenten sind die beiden wichtigsten Möglichkeiten, Komponenten in React zu erstellen.

import React, { Component } from 'react';

class Counter extends Component {
 constructor(props) {
  super(props);
  this.state = { count: 0 };
 }

 handleClick = () => {
  this.setState({  
 count: this.state.count + 1 });
 };

 render() {
  return  
 (
   <div>
    <p>You clicked {this.state.count} times</p>
    <button onClick={this.handleClick}>Click me</button>
   </div>
  );
 }
}

export default Counter;

Dies ist eine Klassenkomponente, die mithilfe von JavaScript-Klassen erstellt wurde, die die React.Component-Klasse erweitern.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default Counter;

Dies wiederum ist eine funktionale Komponente, geschrieben als einfache JavaScript-Funktion.

Staatsmanagement: Der Hauptunterschied.

Klassenkomponenten verwalten ihren eigenen internen Status mithilfe von this.state. Dies wird normalerweise im Konstruktor initialisiert, über das Objekt „this.state“ darauf zugegriffen und über die Methode „this.setState“ aktualisiert, wie im Codeblock oben dargestellt.

Funktionskomponenten waren zunächst zustandslos. Doch mit der Einführung von Hooks erlangten sie die Möglichkeit, Status- und Lebenszykluslogik zu verwalten. Mithilfe des useState-Hooks zum Verwalten des Status wird ein Wertepaar zurückgegeben: der aktuelle Status und eine Funktion zum Aktualisieren, wie oben gezeigt. Dies reicht für eine einfache Zustandsverwaltung aus. Für eine komplexere Zustandslogik mit mehreren Unterwerten oder wenn der nächste Zustand vom vorherigen abhängt, möchten Sie useReducer verwenden.
Zum Beispiel:

import React, { useReducer } from 'react';

const initialState = {
  count: 0,
  step: 1,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + state.step };
    case 'decrement':   

      return { ...state, count: state.count - state.step };
    case 'setStep':
      return { ...state, step: action.payload   
 };
    default:
      throw new Error();
  }
};

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => dispatch({ type: 'increment' });
  const decrement = () => dispatch({ type: 'decrement'   
 });
  const setStep = (newStep) => dispatch({ type: 'setStep', payload: newStep });

  return (
    <div>
      <p>Count: {state.count}</p>
      <p>Step: {state.step}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <input type="number" value={state.step} onChange={(e) => setStep(Number(e.target.value))} />
    </div>
  );
}

export default Counter;

Hier verwaltet useReducer mehrere Statuswerte und komplexe Aktualisierungslogik auf strukturierte und wartbare Weise. Haken sind ausschließlich für Funktionsteile vorgesehen.

Vermeiden Sie eine direkte Manipulation des Statusobjekts in beiden Komponenten.

Ändern oder mutieren Sie das Statusobjekt niemals direkt, unabhängig vom Komponententyp. Erstellen Sie stattdessen ein neues Objekt mit den aktualisierten Werten. Dieser Ansatz hilft React, Änderungen effizient zu verfolgen und erneute Renderings zu optimieren.

Beispiel einer Funktionskomponente:

import React, { useState } from 'react';

function UserProfile() {
  const [user, setUser] = useState({ name: 'Jane Doe', age: 30 });

  const handleNameChange = (newName) => {
    setUser({ ...user, name: newName }); // Create a new object with updated name
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <input type="text" value={user.name} onChange={(e) => handleNameChange(e.target.value)} />
    </div>
  );
}

export default UserProfile;

Beispiel für eine Klassenkomponente:

import React, { Component } from 'react';

class UserProfile extends Component {
  state = { user: { name: 'Jane Doe', age: 30 } };

  handleNameChange = (newName) => {
    this.setState(prevState => ({
      user: { ...prevState.user, name: newName } // Create a new object with updated name
    }));
  };

  render() {
    return (
      <div>
        <p>Name: {this.state.user.name}</p>
        <p>Age: {this.state.user.age}</p>
        <input type="text" value={this.state.user.name} onChange={(e) => this.handleNameChange(e.target.value)} />
      </div>
    );
  }
}

export default UserProfile;

In beiden Beispielen aktualisieren wir die Namenseigenschaft des Benutzerobjekts und bewahren gleichzeitig die Integrität des ursprünglichen Objekts. Dadurch wird sichergestellt, dass ein neues Statusobjekt erstellt wird, die Unveränderlichkeit gewahrt bleibt und potenzielle Probleme bei Statusaktualisierungen verhindert werden. Die Einhaltung dieser Vorgaben sorgt für vorhersehbares Verhalten, Leistungsoptimierungen und einfacheres Debuggen.

Klassenkomponenten dienen der komplexen Logik.

• Komplexe Zustandsverwaltung: Beim Umgang mit komplizierter Zustandslogik, die eine feinkörnige Steuerung erfordert, können Klassenkomponenten mit this.state und this.setState mehr Flexibilität bieten.
• Lebenszyklusmethoden: Für Komponenten, die stark auf Lebenszyklusmethoden wie „componentDidMount“, „componentDidUpdate“ oder „componentWillUnmount“ angewiesen sind, sind Klassenkomponenten die traditionelle Wahl.
• Fehlergrenzen:Um Fehler innerhalb eines Komponentenbaums zu behandeln und Abstürze zu verhindern, sind Klassenkomponenten mit ComponentDidCatch unerlässlich.
• Leistungsoptimierung: In bestimmten leistungskritischen Szenarien können PureComponent oder ShouldComponentUpdate innerhalb von Klassenkomponenten genutzt werden.
• Alte Codebasen: Wenn Sie an einem bestehenden Projekt arbeiten, das stark auf Klassenkomponenten angewiesen ist, ist es möglicherweise einfacher, die Konsistenz aufrechtzuerhalten, indem Sie diese für neue Komponenten verwenden.

Funktionskomponenten dienen der einfachen Ansicht.

• Einfache Komponenten: Für Präsentationskomponenten mit minimalem Status oder minimaler Logik sind Funktionskomponenten aufgrund ihrer Einfachheit und Lesbarkeit oft die bevorzugte Wahl.
• Zustandsverwaltung mit Hooks: Die Nutzung von useState und useReducer in Funktionskomponenten bietet eine leistungsstarke und flexible Möglichkeit, den Zustand zu verwalten.
• Nebenwirkungen: Der useEffect-Hook ermöglicht die Verwaltung von Nebenwirkungen wie Datenabruf, Abonnements oder manuelle DOM-Manipulationen (Dokumentobjektmodell).
• Leistungsoptimierung: useMemo und useCallback können verwendet werden, um die Leistung in Funktionskomponenten zu optimieren.

Lassen Sie sich bei Ihrer Entscheidung von den Anforderungen Ihrer Komponente leiten.

Der funktionale Ansatz wird im Allgemeinen als prägnanter und lesbarer angesehen und reicht aufgrund seiner Einfachheit und Effizienz häufig aus. Allerdings bieten Klassenkomponenten mehr Kontrolle über die Zustandsverwaltung und Lebenszyklusmethoden, insbesondere wenn es um komplexe Logik oder Leistungsoptimierung geht. Dies bedeutet eine bessere Struktur für die Organisation komplexer Logik.

Die Wahl zwischen Klassen- und Funktionskomponenten ist nicht immer eindeutig, da es keine strenge Regel gibt. Bewerten Sie die Anforderungen Ihrer Komponente und entscheiden Sie sich für den Typ, der am besten zu Ihren Projektanforderungen passt.

Mit welcher Komponente arbeiten Sie am liebsten?

Das obige ist der detaillierte Inhalt vonReaktionskomponenten: Klasse vs. Funktional.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!