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, hielt Siswe mit unerschütterlicher Loyalität an den Klassenkomponenten fest.

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 (
    

      
    
  );
}

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  
 (
   

    
You clicked {this.state.count} times
    Click me
   
  );
 }
}

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 (
    

      
You clicked {count} times
      Click me
    
  );
}

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 zu sehen ist.

Funktionale Komponenten waren zunächst zustandslos. Doch mit der Einführung von Hooks erhielten 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. Für eine einfache Zustandsverwaltung ist dies ausreichend. 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 (
    

      
Count: {state.count}
      
Step: {state.step}
       
      -
       setStep(Number(e.target.value))} />
    
  );
}

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 für eine 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 (
    

      
Name: {user.name}
      
Age: {user.age}
       handleNameChange(e.target.value)} />
    
  );
}

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 (
      

        
Name: {this.state.user.name}
        
Age: {this.state.user.age}
         this.handleNameChange(e.target.value)} />
      
    );
  }
}

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 Vorschriften gewährleistet ein vorhersehbares Verhalten, Leistungsoptimierungen und ein einfacheres Debugging.

Klassenkomponenten dienen der komplexen Logik.

• Komplexe Zustandsverwaltung: Beim Umgang mit komplexer 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.
• Legacy-Codebasen: Wenn Sie an einem bestehenden Projekt arbeiten, das stark auf Klassenkomponenten angewiesen ist, ist es möglicherweise einfacher, die Konsistenz aufrechtzuerhalten, indem Sie sie für neue Komponenten verwenden.

Funktionskomponenten dienen der einfachen Ansicht.

• Einfache Komponenten: Für Präsentationskomponenten mit minimalem Status oder minimaler Logik sind funktionale Komponenten 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. Klassenkomponenten bieten jedoch mehr Kontrolle über Zustandsverwaltungs- 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?