React-Einführung

React ist eine JavaScript-Bibliothek, die von Facebook (heute Meta) entwickelt und 2013 als Open Source veröffentlicht wurde und speziell für die Erstellung von Benutzeroberflächen, insbesondere von Single-Page-Anwendungen (SPA), vorgesehen ist.

React ermöglicht es Entwicklern, wiederverwendbare UI-Komponenten deklarativ zu erstellen.

Die Positionierung von React

  • Kein Framework, sondern eine Bibliothek: React konzentriert sich auf die View-Schicht (das V in MVC), anders als Angular, das eine vollständige Framework-Lösung bietet
  • Komponentenbasiertes Denken: Die UI in unabhängige, wiederverwendbare Komponenten aufteilen
  • JavaScript-zentriert: Alles ist JavaScript, einschließlich Struktur, Stil und Logik

Kernfunktionen von React

1. Deklarative Programmierung

Traditionelle imperative Programmierung: Dem Computer sagen, wie er es tun soll

// 原生 JavaScript（命令式）
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  const counter = document.getElementById('counter');
  const currentValue = parseInt(counter.textContent);
  counter.textContent = currentValue + 1;
});

Deklarative Programmierung in React: Dem Computer sagen, welches Ergebnis Sie wollen

// React（声明式）
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Vorteile：

  • Der Code ist prägnanter und intuitiver
  • Einfacher zu verstehen und zu warten
  • Reduziert Fehler durch manuelle DOM-Manipulation
  • State und UI bleiben synchron

2. Komponentenbasiert

Der Kern von React ist komponentenbasiertes Denken, bei dem die UI in unabhängige, wiederverwendbare und zusammensetzbare Komponenten zerlegt wird, ganz wie Bausteine. Jede Komponente kümmert sich nur um ihren eigenen State und ihre Props, wodurch die Logik klar und einfach zu warten ist.

React-Anwendungen bestehen aus unabhängigen Komponenten, von denen jede:

  • Kapselt ihre eigene Struktur, ihren eigenen Stil und ihre eigene Logik
  • Kann Eingaben (Props) empfangen
  • Kann internen State verwalten
  • Kann wiederverwendet und zusammengesetzt werden

Beispiel

// Eine einfache Komponente
function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// Wiederverwendung und Komposition von Komponenten
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Willkommen name="Charlie" />
    </div>
  );
}

Vorteile der komponentenbasierten Architektur：

  • Wiederverwendbarkeit: Dieselbe Komponente kann an mehreren Stellen verwendet werden
  • Wartbarkeit: Das Ändern einer Komponente wirkt sich nicht auf andere Teile aus
  • Testbarkeit: Unabhängige Komponenten sind einfach zu unit-testen
  • Zusammenarbeit: Teammitglieder können verschiedene Komponenten parallel entwickeln

3. Virtual DOM

Was ist das Virtual DOM?

Das Virtual DOM ist eine JavaScript-Objektdarstellung des echten DOM, eine leichtgewichtige In-Memory-Datenstruktur.

So funktioniert es:

1. 状态改变
   ↓
2. 生成新的虚拟 DOM 树
   ↓
3. 与旧虚拟 DOM 树进行对比（Diffing）
   ↓
4. 计算出最小差异（Reconciliation）
   ↓
5. 只更新真实 DOM 中变化的部分

Erklärung des Diagramms:

  • Das Virtual DOM ist eine leichtgewichtige JavaScript-Objektdarstellung des Browser-DOM.
  • Wenn sich der Zustand ändert, berechnet und vergleicht das Framework (wie React) zuerst im Virtual DOM (Diff-Algorithmus).
  • Dann werden durch den Patch-Prozess nur die minimal notwendigen Aktualisierungen auf das echte DOM angewendet.

Warum brauchen wir das virtuelle DOM?

Probleme mit echten DOM-Operationen:

  • DOM-Operationen sind sehr langsam (im Vergleich zu JavaScript-Operationen)
  • Häufige DOM-Operationen verursachen Reflow und Repaint der Seite
  • Direkte DOM-Manipulation ist fehleranfällig

Vorteile des virtuellen DOM:

  • Leistungsoptimierung: Batch-Updates, wodurch die Anzahl echter DOM-Operationen reduziert wird
  • Plattformübergreifend: Das virtuelle DOM kann auf verschiedenen Plattformen gerendert werden (Web, Mobil, Desktop)
  • Deklarativ: Entwickler müssen sich nur um den Zustand kümmern, nicht manuell das DOM manipulieren

Beispielvergleich:

// 假设要更新 1000 个列表项
const items = Array(1000).fill(0).map((_, i) => i);

// 传统方式：每次都操作真实 DOM（慢）
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item;
  ul.appendChild(li); // 1000 次 DOM 操作
});

// React 方式：通过虚拟 DOM 批量更新
function ItemList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}
// React 会智能地批量更新 DOM

4. Unidirektionaler Datenfluss

React-Daten fließen unidirektional nach unten, Parent → Child, und Child kann nicht zum Parent zurückgehen:

React verwendet einen Top-Down-Datenfluss-Ansatz:

父组件
  ↓ (props)
子组件
  ↓ (props)
孙组件

Eigenschaften：

  • Daten fließen von Elternkomponenten zu Kindkomponenten
  • Kindkomponenten kommunizieren über Callback-Funktionen mit Elternkomponenten
  • Der Datenfluss ist klar und lässt sich leicht verfolgen und debuggen

Beispiel

function Parent() {
  const [message, setMessage] = useState('Hello');
 
  return (
    <Child
      message={message}  // Daten werden nach unten weitergegeben
      onUpdate={setMessage}  // Über Callbacks nach oben kommunizieren
    />
  );
}

function Child({ message, onUpdate }) {
  return (
    <div>
      <p>{message}</p>
      <button onClick={() => onUpdate('Updated!')}>
        Update
      </button>
    </div>
  );
}

Hauptvorteile von React

1. Relativ sanfte Lernkurve

  • Weniger Kern-APIs
  • Verwendet hauptsächlich JavaScript-Kenntnisse
  • Klare Konzepte, gut dokumentiert

2. Leistungsstarkes Ökosystem

  • Routing：React Router
  • State-Management：Redux, Zustand, Jotai
  • UI-Bibliotheken：Material-UI, Ant Design, Chakra UI
  • Toolchain：Create React App, Vite, Next.js

3. Breite Unterstützung durch die Community

  • Eine der beliebtesten Frontend-Bibliotheken auf GitHub
  • Eine große Anzahl an Komponenten und Tools von Drittanbietern
  • Aktive Community und umfangreiche Lernressourcen

4. Hervorragende Performance

  • Virtual-DOM-Optimierung
  • Bedarfsgerechtes Rendering
  • Unterstützung für Code-Splitting und Lazy Loading

5. Plattformübergreifende Fähigkeiten

  • React Native: Mobile Anwendungen entwickeln
  • React Native for Windows: Desktop-Anwendungen
  • React 360: VR-Anwendungen

6. Unterstützung für Anwendungen auf Unternehmensebene

Wird von vielen bekannten Unternehmen verwendet:

  • Facebook/Meta
  • Instagram
  • Netflix
  • Airbnb
  • Uber
  • Tencent, Alibaba usw.

Geeignete Anwendungsfälle für React

Für React geeignete Szenarien:

  • Single-Page-Anwendungen (SPA)
  • Dynamische Oberflächen, die häufige Aktualisierungen erfordern
  • Komplexe interaktive Benutzeroberflächen
  • Große Projekte, die die Wiederverwendung von Komponenten erfordern
  • Anwendungen, die eine plattformübergreifende Entwicklung erfordern

Weniger geeignete Szenarien:

  • Einfache statische Websites (möglicherweise überkonstruiert)
  • Websites mit extrem hohen SEO-Anforderungen (müssen mit SSR-Lösungen wie Next.js kombiniert werden)
  • Teams, die mit JavaScript nicht vertraut sind

Vergleich von React mit anderen Frameworks

Merkmal React Vue Angular
Type Bibliothek Progressives Framework Vollständiges Framework
Lernkurve Mittel Vergleichsweise sanft Relativ steil
Flexibilität Hoch Mittel Niedrig (viele Konventionen)
Ökosystem Sehr umfangreich Reichhaltig Vollständige Integration
Enterprise-Support Meta Unabhängig Google
TypeScript Gut unterstützt Gut unterstützt Native Unterstützung

Geschichte der React-Entwicklung

  • 2013: React als Open Source veröffentlicht
  • 2015: React Native veröffentlicht
  • 2016: React 16 (Fiber-Architektur)
  • 2019: React Hooks offiziell veröffentlicht
  • 2020: Experimentelle Version des Concurrent Mode
  • 2022: React 18 (gleichzeitiges Rendering)
  • 2024-2025: Neue Funktionen wie React Compiler, Server Components
Weitere Erweiterungen