Was ist React ⚛️ und das Konzept der Komponenten?

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!