React hat sich seit seiner Einführung erheblich weiterentwickelt und mit dem Aufkommen von Hooks sind funktionale Komponenten zum bevorzugten Ansatz für die Erstellung von React-Anwendungen geworden. Dieser Spickzettel bietet einen Überblick über die wichtigsten Konzepte, Funktionen und Best Practices für die Verwendung funktionaler Komponenten in React.
Eine funktionale Komponente ist eine einfache JavaScript-Funktion, die ein React-Element zurückgibt.
const MyComponent = () => {
return <div>Hello, World!</div>;
};
JSX ist eine Syntaxerweiterung, mit der Sie HTML-ähnlichen Code in Ihrem JavaScript schreiben können.
const MyComponent = () => {
return (
<div>
<h1>Welcome to React</h1>
</div>
);
};
Requisiten werden verwendet, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben.
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
// Usage
<Greeting name="Alice" />
Sie können Standard-Requisiten für eine Komponente definieren.
const Greeting = ({ name = "Guest" }) => {
return <h1>Hello, {name}!</h1>;
};
Mit dem useState Hook können Sie Funktionskomponenten einen Status hinzufügen.
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
};
Mit dem useEffect Hook können Sie Nebenwirkungen in Funktionskomponenten ausführen.
import { useEffect } from 'react';
const DataFetcher = () => {
useEffect(() => {
fetch('/api/data')
.then(response => response.json())
.then(data => console.log(data));
}, []); // Empty dependency array means it runs once
return <div>Data fetched. Check console.</div>;
};
Rendern Sie verschiedene UI-Elemente basierend auf bestimmten Bedingungen.
const LoginMessage = ({ isLoggedIn }) => {
return (
<div>
{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
</div>
);
};
Rendern Sie Datenlisten und verwenden Sie Schlüssel, um React dabei zu helfen, zu erkennen, welche Elemente sich geändert haben.
const ItemList = ({ items }) => {
return (
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
};
Verarbeiten Sie Ereignisse in Funktionskomponenten.
const Button = () => {
const handleClick = () => {
alert('Button clicked!');
};
return <button onClick={handleClick}>Click Me</button>;
};
Formulareingaben mit kontrollierten Komponenten verarbeiten.
const Form = () => {
const [value, setValue] = useState('');
const handleChange = (e) => {
setValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
alert(`Submitted value: ${value}`);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" value={value} onChange={handleChange} />
<button type="submit">Submit</button>
</form>
);
};
Verwenden Sie die Kontext-API für die Statusverwaltung im gesamten Komponentenbaum.
import { createContext, useContext } from 'react';
const MyContext = createContext();
const MyProvider = ({ children }) => {
const value = 'Hello from context';
return (
<MyContext.Provider value={value}>
{children}
</MyContext.Provider>
);
};
const MyComponent = () => {
const contextValue = useContext(MyContext);
return <div>{contextValue}</div>;
};
Erstellen Sie wiederverwendbare Logik mit benutzerdefinierten Hooks.
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);
return data;
};
// Usage
const DataComponent = () => {
const data = useFetch('/api/data');
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
Optimieren Sie die Leistung, indem Sie sich teure Berechnungen merken.
import { useMemo } from 'react';
const ExpensiveComponent = ({ number }) => {
const expensiveCalculation = useMemo(() => {
// Assume this is a computationally expensive operation
return number * 2;
}, [number]);
return <div>{expensiveCalculation}</div>;
};
Verwenden Sie useCallback, um Funktionen zu merken und so unnötige erneute Renderings zu verhindern.
import { useCallback } from 'react';
const Button = ({ onClick }) => {
return <button onClick={onClick}>Click me</button>;
};
const ParentComponent = () => {
const handleClick = useCallback(() => {
console.log('Button clicked');
}, []);
return <Button onClick={handleClick} />;
};
Verwalten Sie komplexe Zustandslogik mit dem useReducer Hook.
import { useReducer } from 'react';
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
Verwenden Sie Fragmente, um mehrere Elemente zu gruppieren, ohne dem DOM zusätzliche Knoten hinzuzufügen.
const MyComponent = () => {
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
};
Untergeordnete Elemente in einen DOM-Knoten außerhalb der DOM-Hierarchie der übergeordneten Komponente rendern.
import { createPortal } from 'react-dom';
const Modal = ({ children }) => {
return createPortal(
<div className="modal">
{children}
</div>,
document.getElementById('modal-root')
);
};
Verwenden Sie Klassenkomponenten für Fehlergrenzen.
import { Component } from 'react';
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.log(error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
// Usage
<ErrorBoundary>
<MyComponent />
</ErrorBoundary>
Komponenten dynamisch importieren, um die anfängliche Ladezeit zu verkürzen.
import { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
};
Verwenden Sie Requisitentypen, um Komponenten-Requisitentypen zu dokumentieren und durchzusetzen.
import PropTypes from 'prop-types';
const Greeting = ({ name }) => {
return <h1>Hello, {name}!</h1>;
};
Greeting.propTypes = {
name: PropTypes.string.isRequired,
};
Funktionale Komponenten bieten eine saubere und unkomplizierte Möglichkeit, React-Anwendungen zu erstellen, insbesondere mit den leistungsstarken Funktionen von Hooks. Dieser Spickzettel bietet einen schnellen Überblick über wichtige Konzepte und hilft Ihnen, effektiven und effizienten React-Code zu schreiben.
Das obige ist der detaillierte Inhalt vonReact Cheat Sheet: Functional Components Edition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
