React-Referenzhandbuch

Das React-Handbuch enthält verschiedene zentrale APIs, Hooks, Komponenten-Lebenszyklusmethoden und mehr.

Das Folgende ist ein vollständiges React-Referenzhandbuch, das alle Kernkonzepte von Grundlagen bis Fortgeschrittenem abdeckt (basierend auf modernen React-18+-Praktiken, mit Schwerpunkt auf Funktionskomponenten + Hooks). Jede Tabelle enthältKonzept/Syntax、Beschreibung、BeispielcodeundHinweise。

1. JSX-Grundlagen

Konzept/Syntax	Beschreibung	Beispielcode	Hinweise
JSX-Grundstruktur	HTML-ähnliche Syntax, kompiliert zu`React.createElement`	`return <div>Hello</div>;`	Muss ein einzelnes Wurzelelement haben, kann verwendet werden`<></>`Fragment
Ausdruckseinbettung	Verwenden Sie`{}`JS-Ausdrücke einbetten (nur Ausdrücke, keine Anweisungen)	`<h1>{name.toUpperCase()}</h1>`	Unterstützt Berechnung, Variablen, Ternär, usw.
Attribut-Bindung	class → className，for → htmlFor	`<div className="box" htmlFor="id">`	Camel-Case-Benennung (z. B.`tabIndex`）
Selbstschließende Tags	Alle Tags müssen geschlossen sein	`<img src="....html" alt="..." />`	Tags ohne untergeordnete Elemente müssen selbstschließend sein
Bedingtes Rendern	Ternärer Operator oder`&&`	`{isLogin ? <User /> : <Login />}`<br>`{count > 0 && <span>{count}</span>}`	`&&`Wird für "Rendern, falls vorhanden" verwendet
Listen-Rendering	Verwenden Sie`map()`, muss hinzugefügt werden`key`	`{items.map(item => <li key={item.id}>{item.name}</li>)}`	Key muss eindeutig und stabil sein, Index vermeiden
Kommentare	Verwenden Sie`{/* */}`	`{/* This is a comment */}`	Innerhalb von JSX platziert
Fragment	Leeres Tag, vermeidet zusätzliches DOM	`<><p>1</p><p>2</p></>`oder`<React.Fragment>`	Kurze Syntax`<></>`Häufiger verwendet

2. Komponentengrundlagen

Konzept/Syntax	Beschreibung	Beispielcode	Hinweise
Funktionskomponenten (empfohlen)	Ersten Buchstaben groß schreiben, JSX zurückgeben	`function App() { return <div>Hello</div>; }`	Moderne erste Wahl, kein this
Klassenkomponenten (Legacy)	Verwenden Sie`class`Vererbung`React.Component`	`class App extends React.Component { render() { return <div/>; } }`	Nur zum Verständnis von Legacy-Code
Props-Weitergabe	Einseitiger Datenfluss, von Eltern zu Kind	`<Child name="QiXin" age={25} />`<br>Kindkomponente:`function Child({name}) {...}`	Schreibgeschützt, kann nicht geändert werden
Standard-Props	`defaultProps`(Funktionskomponenten verwenden Standardwerte für Parameter)	`function Child({name = 'Guest'}) {...}`	ES6-Standardparameter sind prägnanter
Props-Typprüfung	PropTypes (oder TypeScript)	`Child.propTypes = { name: PropTypes.string.isRequired }`	Warnung im Entwicklungsmodus, in Produktion entfernt
Komponentenkomposition	Verschachtelung, children	`<Card><h1>Title</h1></Card>`<br>Elternkomponente:`{props.children}`	children ist eine spezielle Prop

3. State und Hooks (Kern)

Hook / Konzept	Beschreibung	Beispielcode	Hinweise
useState	State-Variable deklarieren	`const [count, setCount] = useState(0);`<br>`<button onClick={() => setCount(c => c+1)}>`	Funktionales Update in set verhindert veralteten State
useEffect	Seiteneffekte (Mount, Update, Cleanup)	`useEffect(() => { ... }, [dep]);`<br>Eine Cleanup-Funktion zurückgeben	Leeres Array [] wird nur beim Mounten ausgeführt
useRef	Speichert veränderliche Werte oder DOM-Referenzen	`const inputRef = useRef(null);`<br>`inputRef.current.focus();`	Löst kein Re-Render aus
useContext	Context konsumieren, Prop Drilling vermeiden	`const theme = useContext(ThemeContext);`	Funktioniert mit Context.Provider
useReducer	Komplexe State-Logik (ähnlich wie Redux)	`const [state, dispatch] = useReducer(reducer, initial);`	Wird für mehrere zusammenhängende Zustände verwendet
useMemo	Berechnete Ergebnisse zwischenspeichern	`const memoValue = useMemo(() => compute(), [dep]);`	Erneutes Ausführen aufwendiger Berechnungen vermeiden
useCallback	Funktionsreferenzen zwischenspeichern	`const handle = useCallback(() => {...}, [dep]);`	Props von Kindkomponenten optimieren
Benutzerdefinierte Hooks	Wiederverwendbare Logik kapseln	`function useFetch(url) { ... return data; }`	Beginne mit use

4. Lebenszyklus (Klassenkomponenten vs. Hooks)

Phase	Klassenkomponenten-Methode	Hooks-Äquivalent	Hinweise
Mounten	constructor → render → componentDidMount	useEffect(() => {…}, [])	State initialisieren / API-Aufrufe
Update	shouldComponentUpdate → render → componentDidUpdate	useEffect(() => {…}, [dep]) + memo	Ausgelöst durch Änderungen der Abhängigkeiten
Unmounten	componentWillUnmount	useEffect gibt eine Cleanup-Funktion zurück	Timer/Subscriptions löschen
Fehlerbehandlung	componentDidCatch	ErrorBoundary-Komponente	Hooks haben kein direktes Äquivalent

5. Context und globaler Zustand

Konzept	Beschreibung	Beispielcode	Hinweise
Context API	Globales Teilen von Daten	`const ThemeContext = createContext();`<br>`<Provider value="dark">`	Übermäßige Nutzung vermeiden, Performance-Kosten
useContext	In Funktionskomponenten konsumieren	`const theme = useContext(ThemeContext);`	Prägnanter Ersatz für Consumer

6. Erweiterte Funktionen (React 18+)

Konzept	Beschreibung	Beispielcode	Hinweise
Concurrent Mode	Unterbrechbares Rendering, verbessert die Reaktionsfähigkeit	`<React.StrictMode>` + Transitions	Automatisches Batching von Updates
Suspense	Lazy Loading / Warten auf Datenabruf	`<Suspense fallback={<Loading/>}><LazyComp /></Suspense>`	Funktioniert mit lazy
React.lazy	Code-Splitting durch Lazy Loading	`const Lazy = React.lazy(() => import('./Comp'));`	Muss von Suspense umschlossen werden
startTransition	Nicht dringende Updates markieren	`startTransition(() => setQuery(e.target.value));`	UI reaktionsschnell halten
useDeferredValue	Nicht dringende Werte verzögern	`const deferred = useDeferredValue(query);`	Ähnlich wie Eingabe-Debounce

7. Leistungsoptimierung

Technik	Beschreibung	Beispielcode	Hinweise
React.memo	Props flach vergleichen, unnötiges Rendern vermeiden	`export default React.memo(Component);`	Nur für Funktionskomponenten
useMemo / useCallback	Werte/Funktionen cachen	Wie oben	Erneutes Rendern von Kindkomponenten verhindern
Key-Optimierung	Stabiler und eindeutiger Key	z. B. Listen-Rendering	Index vermeiden
Virtuelle Liste	Optimierung langer Listen (react-window)	`<FixedSizeList height={500} itemCount={1000} />`	Drittanbieter-Bibliothek

8. Gängige Ökosystem-Tools

Tool	Zweck	Installation/Verwendung	Hinweise
React Router v6	Routing und Navigation	`npm i react-router-dom`<br>`<BrowserRouter><Routes><Route path="/" element={<Home/>}/></Routes></BrowserRouter>`	Verschachtelte Routen, Outlet
Redux Toolkit	Globale Zustandsverwaltung	`npm i @reduxjs/toolkit react-redux`	RTK Query-Datenabruf
React Hook Form	Formularverarbeitung	`useForm()`	Hohe Performance, einfache Validierung
Axios / Fetch	Datenanfragen	`fetch('/api')`	Wird in useEffect verwendet
Tailwind / MUI	UI-Styling	`npm i tailwindcss`oder`mui`	Schnelle Verschönerung

9. Debugging und Best Practices

Item	Beschreibung	Tool/Methode
Debugging-Tool	Komponentenbaum, Props, Hooks anzeigen	React DevTools (Browser-Erweiterung)
Strict Mode	Potenzielle Probleme entdecken	`<React.StrictMode>`
ESLint + Prettier	Code-Standards	VS Code-Erweiterung
Testen	Jest + React Testing Library	`npm i --save-dev jest`

Im Folgenden sind einige gängige Funktionen und Methoden samt Kurzbeschreibungen aufgeführt:

React-Kern-API

createElement(type, [props], [...children])- Erstellt ein React-Element oder eine Komponente.

Beispiel

import React from 'react';

const element = React.createElement('div', { className: 'container' }, 'Hello, World!');
// React.createElement gibt ein React-Element zurück

cloneElement(element, [props], [...children])- Klont und gibt ein React-Element zurück, dem neue Props und Children übergeben werden können.

Beispiel

import React, { cloneElement } from 'react';

const parentElement = <div>Hello</div>;
const clonedElement = cloneElement(parentElement, { className: 'child' });
// clonedElement ist ein geklontes React-Element mit einem neuen className

createFactory(type)- Erstellt eine Factory-Funktion zum Erstellen von React-Elementen eines angegebenen Typs.

Beispiel

import React from 'react';

const factory = React.createFactory('button');
const buttonElement = factory({ onClick: () => console.log('Button clicked') }, 'Click me');
// buttonElement ist ein React-Element, das von der Factory erstellt wurde, ein anklickbarer Button

isValidElement(element)- Bestimmt, ob ein Objekt ein gültiges React-Element ist.

Beispiel

import React, { isValidElement } from 'react';

const element = <div>Hello</div>;
console.log(isValidElement(element)); // true

Children.map(children, function[(thisArg)])- Über React-Kinder iterieren und sie abbilden.

Beispiel

import React, { Children } from 'react';

const parentElement = (
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
);

const mappedChildren = Children.map(parentElement.props.children, child => (
<li>{child}</li>
));
// mappedChildren ist die gemappte Liste der Kinder

React-Komponenten-Lebenszyklusmethoden

constructor(props)- Konstruktor, wird aufgerufen, wenn die Komponente erstellt wird, und dient zum Initialisieren des Zustands und zum Binden von Methoden.

Beispiel

import React, { Component } from 'react';

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

render() {
return <div>{this.state.count}</div>;
}
}

componentDidMount()- Wird aufgerufen, nachdem die Komponente gemountet wurde, normalerweise für Seiteneffekt-Operationen wie Datenabruf und Abonnements verwendet.

Beispiel

import React, { Component } from 'react';

class MyComponent extends Component {
componentDidMount() {
// Daten abonnieren, nachdem die Komponente gemountet wurde
this.subscription = subscribeToData(data => {
this.setState({ data });
});
}

componentWillUnmount() {
// Abonnement beenden, bevor die Komponente unmountet
this.subscription.unsubscribe();
}

render() {
return <div>{this.state.data}</div>;
}
}

componentDidUpdate(prevProps, prevState)- Wird aufgerufen, nachdem die Komponente aktualisiert wurde, normalerweise verwendet, um auf Änderungen an Props oder State zu reagieren.

Beispiel

import React, { Component } from 'react';

class MyComponent extends Component {
componentDidUpdate(prevProps, prevState) {
// Daten aktualisieren, wenn sich Props oder State ändern
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}

render() {
return <div>{this.props.userID}</div>;
}
}

componentWillUnmount()- Wird aufgerufen, bevor die Komponente unmountet wird, und dient zum Freigeben von Ressourcen wie dem Bereinigen von Timern und dem Abmelden von Abonnements.

Beispiel

import React, { Component } from 'react';

class MyComponent extends Component {
componentWillUnmount() {
// Ressourcen bereinigen, bevor die Komponente unmountet wird
clearInterval(this.timerID);
}

render() {
return <div>{this.state.time}</div>;
}
}

static getDerivedStateFromProps(props, state)- Wird verwendet, um componentWillReceiveProps zu ersetzen, und aktualisiert den State, wenn sich die Props ändern.

Beispiel

import React, { Component } from 'react';

class MyComponent extends Component {
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.userID !== prevState.userID) {
return { userID: nextProps.userID };
}
return null;
}

render() {
return <div>{this.state.userID}</div>;
}
}

React Hooks

useState(initialState)- Deklariert eine State-Variable und ihre Aktualisierungsfunktion.

Beispiel

import React, { useState } from 'react';

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

return (
<div>
<p>Sie haben {count} Mal geklickt</p>
<button onClick={() => setCount(count + 1)}>Klick mich</button>
</div>
);
}

useEffect(callback, [dependencies])- Deklariert eine Seiteneffekt-Operation, ähnlich einer Kombination aus componentDidMount und componentDidUpdate.

Beispiel

import React, { useState, useEffect } from 'react';

function Timer() {
const [seconds, setSeconds] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setSeconds(seconds => seconds + 1);
}, 1000);

return () => clearInterval(interval);
}, []); // Ein leeres Array als zweites Argument bedeutet, dass es nur ausgeführt wird, wenn die Komponente gemountet und unmountet wird

return <p>Timer: {seconds} seconds</p>;
}

useContext(context)- Einen React-Kontext abrufen und abonnieren.

Beispiel

import React, { useContext } from 'react';

const MyContext = React.createContext('default');

function MyComponent() {
const contextValue = useContext(MyContext);
return <p>Kontextwert: {contextValue}</p>;
}

useReducer(reducer, initialState)- Einen Reducer und eine Dispatch-Funktion für komplexe Zustandslogik deklarieren.

Beispiel

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}

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

return (
<div>
<p>Anzahl: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Erhöhen</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Verringern</button>
</div>
);
}

useCallback(callback, [dependencies])- Eine Callback-Funktion zwischenspeichern, um zu vermeiden, dass sie bei Änderungen der Abhängigkeiten neu erstellt wird.

Beispiel

import React, { useState, useCallback } from 'react';

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

const increment = useCallback(() => {
setCount(count + 1);
}, [count]);

return (
<div>
<ChildComponent onClick={increment} />
</div>
);
}

function ChildComponent({ onClick }) {
return <button onClick={onClick}>Anzahl erhöhen</button>;
}

useMemo(factory, [dependencies])- Einen berechneten Wert zwischenspeichern, um zu vermeiden, dass er bei Änderungen der Abhängigkeiten neu berechnet wird.

Beispiel

import React, { useMemo } from 'react';

function ExpensiveComponent({ data }) {
const expensiveValue = useMemo(() => {
return computeExpensiveValue(data);
}, [data]);

return <div>Aufwändiger Wert: {expensiveValue}</div>;
}

useRef(initialValue)- Erstelle eine persistente Referenz, die verwendet werden kann, um auf DOM-Elemente zuzugreifen oder jeden veränderlichen Wert zwischenzuspeichern.

Beispiel

import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return (
<>
<input ref={inputRef} type="text" />
<button onClick={() => inputRef.current.focus()}>Eingabe fokussieren</button>
</>
);
}

Weitere gängige Funktionen

ReactDOM.render(element, container[, callback])- Rendert ein React-Element in den angegebenen DOM-Knoten.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hallo, Welt!</h1>;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.createRoot(container[, options])- Erstellt eine React-Root-Instanz, die Concurrent-Rendering-Funktionen unterstützt.

Beispiel

import ReactDOM from 'react-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

ReactDOM.unmountComponentAtNode(container)- Entfernt die React-Komponente aus dem angegebenen DOM-Knoten.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.unmountComponentAtNode(document.getElementById('root'));

ReactDOMServer.renderToString(element)- Rendert ein React-Element in einen statischen HTML-String für serverseitiges Rendering.

Beispiel

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const element = <div>Hallo, Welt!</div>;
const htmlString = ReactDOMServer.renderToString(element);

Weitere Erweiterungen

React Praxisprojekt

React-Referenzhandbuch

1. JSX-Grundlagen

2. Komponentengrundlagen

3. State und Hooks (Kern)

4. Lebenszyklus (Klassenkomponenten vs. Hooks)

5. Context und globaler Zustand

6. Erweiterte Funktionen (React 18+)

7. Leistungsoptimierung

8. Gängige Ökosystem-Tools

9. Debugging und Best Practices

React-Kern-API

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

React-Komponenten-Lebenszyklusmethoden

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

React Hooks

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

Beispiel

Weitere gängige Funktionen

Beispiel

Beispiel

Beispiel

Beispiel