Aide-mémoire React : édition des composants fonctionnels

Aide-mémoire pour réagir

React a considérablement évolué depuis sa création, et avec l'essor des Hooks, les composants fonctionnels sont devenus l'approche incontournable pour créer des applications React. Cette aide-mémoire fournit un aperçu des concepts clés, des fonctionnalités et des meilleures pratiques pour l'utilisation des composants fonctionnels dans React.

1. Bases des composants fonctionnels

Un composant fonctionnel est une simple fonction JavaScript qui renvoie un élément React.

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

2. Utiliser JSX

JSX est une extension de syntaxe qui vous permet d'écrire du code de type HTML dans votre JavaScript.

const MyComponent = () => {
  return (
    <div>
      <h1>Welcome to React</h1>
    </div>
  );
};

3. Accessoires

Les accessoires sont utilisés pour transmettre des données d'un composant parent à un composant enfant.

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

// Usage
<Greeting name="Alice" />

4. Accessoires par défaut

Vous pouvez définir des accessoires par défaut pour un composant.

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

5. État avec useState

Le hook useState vous permet d'ajouter un état aux composants fonctionnels.

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. Crochet d’effet : useEffect

Le hook useEffect vous permet d'effectuer des effets secondaires dans les composants fonctionnels.

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. Rendu conditionnel

Rendu différents éléments de l'interface utilisateur en fonction de certaines conditions.

const LoginMessage = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please log in.</h1>}
    </div>
  );
};

8. Listes et clés

Rendez des listes de données et utilisez des clés pour aider React à identifier les éléments qui ont changé.

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

9. Gestion des événements

Gérer les événements dans les composants fonctionnels.

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

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

10. Formulaires et composants contrôlés

Gérez la saisie du formulaire avec des composants contrôlés.

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. API contextuelle

Utilisez l'API Context pour la gestion de l'état dans l'arborescence des composants.

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. Crochets personnalisés

Créez une logique réutilisable avec des hooks personnalisés.

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. Mémorisation avec useMemo

Optimisez les performances en mémorisant des calculs coûteux.

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. utiliserCallback

Utilisez useCallback pour mémoriser les fonctions afin d'éviter les nouveaux rendus inutiles.

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. utiliserRéducteur

Gérez la logique d'état complexe avec le 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. Fragments

Utilisez des fragments pour regrouper plusieurs éléments sans ajouter de nœuds supplémentaires au DOM.

const MyComponent = () => {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
};

17. Portails

Rendu les enfants dans un nœud DOM en dehors de la hiérarchie DOM du composant parent.

import { createPortal } from 'react-dom';

const Modal = ({ children }) => {
  return createPortal(
    <div className="modal">
      {children}
    </div>,
    document.getElementById('modal-root')
  );
};

18. Limites d'erreur avec composant de limite d'erreur

Utilisez des composants de classe pour les limites d'erreur.

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. Chargement paresseux avec React.lazy et Suspense

Importez dynamiquement des composants pour réduire le temps de chargement initial.

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
};

20. PropTypes pour la vérification de type

Utilisez les types d'accessoires pour documenter et appliquer les types d'accessoires de composants.

import PropTypes from 'prop-types';

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

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Les composants fonctionnels offrent un moyen propre et simple de créer des applications React, en particulier grâce aux puissantes fonctionnalités introduites par Hooks. Cette aide-mémoire fournit une référence rapide aux concepts essentiels, vous aidant à rédiger du code React efficace et efficient.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!