React Cheat Sheet: Functional Components Edition

Spickzettel reagieren

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.

1. Grundlagen der Funktionskomponenten

Eine funktionale Komponente ist eine einfache JavaScript-Funktion, die ein React-Element zurückgibt.

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

2. Verwendung von JSX

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>
  );
};

3. Requisiten

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" />

4. Standard-Requisiten

Sie können Standard-Requisiten für eine Komponente definieren.

const Greeting = ({ name = "Guest" }) => {
  return <h1>Hello, {name}!</h1>;
};

5. Zustand mit useState

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>
  );
};

6. Effekt-Hook: useEffect

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>;
};

7. Bedingtes Rendern

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>
  );
};

8. Listen und Schlüssel

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>
  );
};

9. Ereignisbehandlung

Verarbeiten Sie Ereignisse in Funktionskomponenten.

const Button = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

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

10. Formulare und kontrollierte Komponenten

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>
  );
};

11. Kontext-API

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>;
};

12. Benutzerdefinierte Haken

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>;
};

13. Auswendiglernen mit useMemo

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>;
};

14. useCallback

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} />;
};

15. Verwenden SieReducer

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>
  );
};

16. Fragmente

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>
    </>
  );
};

17. Portale

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')
  );
};

18. Fehlergrenzen mit Fehlergrenzenkomponente

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>

19. Lazy Loading mit React.lazy und Suspense

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>
  );
};

20. PropTypes für die Typprüfung

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!