React Cheat Sheet: Functional Components Edition-js-Tutorial-php.cn

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

4. Standard-Requisiten

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

9. Ereignisbehandlung

Verarbeiten Sie Ereignisse in Funktionskomponenten.

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!