React ?? ist eine leistungsstarke JavaScript-Bibliothek zum Erstellen von Benutzeroberfl?chen. Es wurde 2013 von Facebook entwickelt und revolutionierte die UI-Entwicklung mit seiner komponentenbasierten Architektur und seinem deklarativen Ansatz. Egal, ob Sie eine einfache Web-App oder ein komplexes System erstellen, React macht die Erstellung wiederverwendbarer, dynamischer Benutzeroberfl?chen effizient und angenehm.

Dieser Artikel befasst sich mit den Grundlagen von React und seinem Kernkonzept: Komponenten, mit zahlreichen Codebeispielen zur Veranschaulichung dieser Ideen.

Was ist Reagieren?

Im Kern ist React eine JavaScript-Bibliothek, die für die Erstellung dynamischer und interaktiver Benutzeroberfl?chen entwickelt wurde. Es konzentriert sich auf die Ansichtsschicht einer Anwendung und folgt der Model-View-Controller (MVC)-Architektur. Mit React k?nnen Sie ganz einfach Schnittstellen erstellen, die effizient aktualisiert werden, wenn sich die Daten Ihrer Anwendung ?ndern.

Warum Reagieren w?hlen?

1. Wiederverwendbare Komponenten: Entwickeln Sie modulare Benutzeroberfl?chen, indem Sie sie in unabh?ngige, wiederverwendbare Komponenten aufteilen.
2. Virtuelles DOM:Schnellere Aktualisierungen durch Berechnung von ?nderungen in einem einfachen virtuellen DOM vor der Aktualisierung des eigentlichen DOM.
3. Deklarativ: Beschreiben Sie, was Sie in der Benutzeroberfl?che sehen m?chten, und React kümmert sich um den Rest.
4. Reichhaltiges ?kosystem: Nutzen Sie Bibliotheken wie Redux, React Router und Next.js, um die F?higkeiten von React zu erweitern.

Das Konzept der Komponenten in React

React-Anwendungen werden mithilfe von Komponenten erstellt, die die Bausteine ??einer React-App sind. Eine Komponente ist ein unabh?ngiger Teil der Benutzeroberfl?che, der deren Logik, Struktur und Stil kapselt.

Funktionskomponenten

Funktionale Komponenten sind einfache JavaScript-Funktionen, die Requisiten als Eingabe akzeptieren und React-Elemente zurückgeben. Sie sind der h?ufigste Komponententyp in modernen React-Anwendungen.

Beispiel: Eine grundlegende Funktionskomponente

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

Klassenkomponenten

Klassenkomponenten sind ES6-Klassen, die die React.Component-Klasse erweitern. Sie wurden h?ufig vor der Einführung von Haken verwendet.

Beispiel: Eine Basisklassenkomponente

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

Die Anatomie einer Komponente

Beispiel: Funktionskomponente mit Status

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

Abbauen:

1. Statusverwaltung: Der useState-Hook wird verwendet, um den Status (Anzahl) innerhalb der Komponente zu verwalten.
2. Requisiten:Daten k?nnen über Requisiten an die Komponente übergeben werden.
3. Ereignisse: Der onClick-Ereignishandler aktualisiert den Status, wenn auf die Schaltfl?che geklickt wird.

Requisiten vs. Staat

Zustand in Komponenten

State ist ein spezielles Objekt in React, das zum Speichern von Daten verwendet wird, die eine Komponente rendern muss. Funktionskomponenten verwenden den useState-Hook für die Statusverwaltung.

Beispiel: Z?hler mit Status

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

Requisiten in Komponenten

Requisiten sind Argumente, die von einer übergeordneten Komponente an eine untergeordnete Komponente übergeben werden und den Datenfluss in der Komponentenhierarchie nach unten erm?glichen.

Beispiel: Requisiten weitergeben

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

Komponieren von Komponenten

React f?rdert die Verschachtelung von Komponenten, um komplexe Benutzeroberfl?chen aus kleineren, wiederverwendbaren Bausteinen zu erstellen.

Beispiel: Verschachtelte Komponenten

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Lebenszyklusmethoden in Klassenkomponenten

Klassenkomponenten umfassen Lebenszyklusmethoden zum Ausführen von Aktionen w?hrend der Montage-, Aktualisierungs- und Unmount-Phasen. Für Funktionskomponenten ersetzen React-Hooks wie useEffect diese Lebenszyklusmethoden.

Beispiel: Lebenszyklusmethoden

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

Beispiel: Lebenszyklus mit useEffect

function Greeting({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

// Renders: Welcome, John!

Ereignisbehandlung in React

React vereinfacht den Umgang mit Ereignissen. Ereignishandler werden als Requisiten an Elemente übergeben und ausgeführt, wenn das Ereignis auftritt.

Beispiel: Klicken Sie auf ?Ereignis“.

function Header() {
  return <header><h1>My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>? 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

// Usage
<App />;

Beispiel: Eingabeverarbeitung

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<Timer />;

Bedingtes Rendering

Mit React k?nnen Sie Komponenten oder Elemente basierend auf der Anwendungslogik bedingt rendern.

Beispiel: Bedingtes Rendering

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<Timer />;

Listen und Schlüssel

Beim Rendern von Listen in React ist es wichtig, jedem Element einen eindeutigen Schlüssel zuzuweisen, damit React ?nderungen erkennen kann.

Beispiel: Rendern einer Liste

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

// Usage
<Button />;

Wiederverwendbare Komponenten

React f?rdert die Erstellung von Komponenten, die in der gesamten Anwendung wiederverwendet werden k?nnen, um Redundanz zu reduzieren.

Beispiel: Wiederverwendbare Schaltfl?chenkomponente

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<InputExample />;

Fazit

React ist ein leistungsstarkes Tool zum Erstellen moderner Webanwendungen. Seine komponentenbasierte Architektur, gepaart mit Funktionen wie Requisiten, Status und Hooks, erm?glicht die Erstellung dynamischer, effizienter und wiederverwendbarer Benutzeroberfl?chen. Durch die Beherrschung der Kernkonzepte von React und den effektiven Einsatz seiner Tools k?nnen Entwickler au?ergew?hnliche Benutzererlebnisse bieten und gleichzeitig saubere und wartbare Codebasen beibehalten. Bereit, loszulegen? Erstellen Sie Ihre erste React-App und erleben Sie die Magie der Komponenten in Aktion! ?

Das obige ist der detaillierte Inhalt vonWas ist React ?? und das Konzept der Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!