Manuel de référence React

Le manuel React contient diverses API principales, des Hooks, des méthodes de cycle de vie des composants, et plus encore.

Ce qui suit est un manuel de référence React complet, couvrant tous les concepts, des bases aux niveaux avancés (basé sur les pratiques modernes de React 18+, en privilégiant les composants fonctionnels + Hooks). Chaque tableau inclutConcept/Syntaxe、Description、Exemple de codeetRemarques。

1. Bases de JSX

Concept/Syntaxe Description Exemple de code Notes
Structure de base de JSX Syntaxe de type HTML, compilée enReact.createElement return <div>Hello</div>; Doit avoir un seul élément racine, peut utiliser<></>Fragment
Intégration d'expressions use{}Intégrer des expressions JS (uniquement des expressions, pas des instructions) <h1>{name.toUpperCase()}</h1> Prend en charge les calculs, les variables, le ternaire, etc.
Liaison d'attributs class → className，for → htmlFor <div className="box" htmlFor="id"> Nommage en camel case (par ex.tabIndex）
Balises auto-fermantes Toutes les balises doivent être fermées <img src="....html" alt="..." /> Les balises sans enfants doivent être auto-fermantes
Rendu conditionnel Opérateur ternaire ou&& {isLogin ? <User /> : <Login />}<br>{count > 0 && <span>{count}</span>} &&Utilisé pour « afficher si existe »
Rendu des listes usemap(), il faut ajouterkey {items.map(item => <li key={item.id}>{item.name}</li>)} La clé doit être unique et stable, éviter d'utiliser index
Commentaires use{/* */} {/* This is a comment */} Placé à l'intérieur du JSX
Fragment Balise vide, évite un DOM supplémentaire <><p>1</p><p>2</p></>ou<React.Fragment> Syntaxe courte<></>Plus couramment utilisé

2. Bases des composants

Concept/Syntaxe Description Exemple de code Notes
Composants fonctionnels (recommandé) Mettre la première lettre en majuscule, retourner du JSX function App() { return <div>Hello</div>; } Premier choix moderne, pas de this
Composants de classe (hérités) UtiliserclassHéritageReact.Component class App extends React.Component { render() { return <div/>; } } Uniquement pour comprendre le code hérité
Passage de props Flux de données unidirectionnel, du parent vers l'enfant <Child name="QiXin" age={25} /><br>Composant enfant :function Child({name}) {...} Lecture seule, ne peut pas être modifié
Props par défaut defaultProps(Les composants fonction utilisent les valeurs par défaut des paramètres) function Child({name = 'Guest'}) {...} Les paramètres par défaut ES6 sont plus concis
Vérification des types de props PropTypes (ou TypeScript) Child.propTypes = { name: PropTypes.string.isRequired } Avertissement en mode développement, supprimé en production
Composition de composants Imbrication, children <Card><h1>Title</h1></Card><br>Parent :{props.children} children est une prop spéciale

3. État et Hooks (Cœur)

Hook / Concept Description Exemple de code Notes
useState Déclarer une variable d'état const [count, setCount] = useState(0);<br><button onClick={() => setCount(c => c+1)}> La mise à jour fonctionnelle dans set évite l'état obsolète
useEffect Effets de bord (montage, mise à jour, nettoyage) useEffect(() => { ... }, [dep]);<br>Retourner une fonction de nettoyage Un tableau vide [] s'exécute uniquement au montage
useRef Stocker des valeurs mutables ou des références DOM const inputRef = useRef(null);<br>inputRef.current.focus(); Ne déclenche pas de re-rendu
useContext Consommer le Context, éviter le prop drilling const theme = useContext(ThemeContext); Fonctionne avec Context.Provider
useReducer Logique d'état complexe (similaire à Redux) const [state, dispatch] = useReducer(reducer, initial); Utilisé pour plusieurs états liés
useMemo Mettre en cache les résultats calculés const memoValue = useMemo(() => compute(), [dep]); Éviter de réexécuter des calculs coûteux
useCallback Mettre en cache les références de fonction const handle = useCallback(() => {...}, [dep]); Optimiser les Props des composants enfants
Hooks personnalisés Encapsuler la logique réutilisable function useFetch(url) { ... return data; } Commencer par use

4. Cycle de vie (Composants de classe vs Hooks)

Phase Méthode de composant de classe Équivalent Hooks Notes
Montage constructor → render → componentDidMount useEffect(() => {…}, []) Initialiser l'état / appels API
Update shouldComponentUpdate → render → componentDidUpdate useEffect(() => {…}, [dep]) + memo Déclenché par les changements de dépendances
Démontage componentWillUnmount useEffect retourne une fonction de nettoyage Nettoyer les timers/abonnements
Gestion des erreurs componentDidCatch Composant ErrorBoundary Les Hooks n'ont pas d'équivalent direct

5. Context et état global

Concept Description Exemple de code Notes
API Context Partage global de données const ThemeContext = createContext();<br><Provider value="dark"> Éviter l'utilisation excessive, coût en performances
useContext Consommer dans les composants fonction const theme = useContext(ThemeContext); Remplacement concis de Consumer

6. Fonctionnalités avancées (React 18+)

Concept Description Exemple de code Notes
Mode concurrent Rendu interruptible, améliore la réactivité <React.StrictMode> + Transitions Regroupement automatique des mises à jour
Suspense Chargement différé / attente de la récupération des données <Suspense fallback={<Loading/>}><LazyComp /></Suspense> Fonctionne avec lazy
React.lazy Fractionnement de code et chargement différé const Lazy = React.lazy(() => import('./Comp')); Doit être enveloppé par Suspense
startTransition Marquer les mises à jour non urgentes startTransition(() => setQuery(e.target.value)); Garder l'interface utilisateur réactive
useDeferredValue Différer les valeurs non urgentes const deferred = useDeferredValue(query); Similaire au debounce de saisie

7. Optimisation des performances

Technique Description Exemple de code Notes
React.memo Comparaison superficielle des props, éviter les rendus inutiles export default React.memo(Component); Exclusif aux composants fonctionnels
useMemo / useCallback Mettre en cache les valeurs/fonctions Comme ci-dessus Empêcher le re-rendu des composants enfants
Optimisation des clés Clé stable et unique par ex., rendu de liste Éviter l'index
Liste virtualisée Optimisation des longues listes (react-window) <FixedSizeList height={500} itemCount={1000} /> Bibliothèque tierce

8. Outils courants de l'écosystème

Outil Objectif Installation/Utilisation Notes
React Router v6 Routage et navigation npm i react-router-dom<br><BrowserRouter><Routes><Route path="/" element={<Home/>}/></Routes></BrowserRouter> Routes imbriquées, Outlet
Redux Toolkit Gestion de l'état global npm i @reduxjs/toolkit react-redux Récupération de données avec RTK Query
React Hook Form Gestion des formulaires useForm() Haute performance, validation simple
Axios / Fetch Requêtes de données fetch('/api') Utilisé dans useEffect
Tailwind / MUI Styles d'interface npm i tailwindcssoumui Embellissement rapide

9. Débogage et bonnes pratiques

Item Description Outil/Méthode
Outil de débogage Visualiser l'arborescence des composants, Props, Hooks React DevTools (extension de navigateur)
Mode strict Détecter les problèmes potentiels <React.StrictMode>
ESLint + Prettier Normes de code Extension VS Code
Test Jest + React Testing Library npm i --save-dev jest

Voici quelques fonctions et méthodes courantes, accompagnées de leurs brèves descriptions :

API principale de React

createElement(type, [props], [...children])- Crée un élément ou un composant React.

Exemple

import React from 'react';

const element = React.createElement('div', { className: 'container' }, 'Hello, World!');
// React.createElement renvoie un élément React

cloneElement(element, [props], [...children])- Clone et renvoie un élément React, auquel on peut transmettre de nouvelles props et enfants.

Exemple

import React, { cloneElement } from 'react';

const parentElement = <div>Bonjour</div>;
const clonedElement = cloneElement(parentElement, { className: 'child' });
// clonedElement est un élément React cloné avec un nouveau className

createFactory(type)- Crée une fonction de fabrique pour créer des éléments React d'un type spécifié.

Exemple

import React from 'react';

const factory = React.createFactory('button');
const buttonElement = factory({ onClick: () => console.log('Bouton cliqué') }, 'Cliquez-moi');
// buttonElement est un élément React créé par la fabrique, un bouton cliquable

isValidElement(element)- Détermine si un objet est un élément React valide.

Exemple

import React, { isValidElement } from 'react';

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

Children.map(children, function[(thisArg)])- Parcourir et mapper les enfants React.

Exemple

import React, { Children } from 'react';

const parentElement = (
  <ul>
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
  </ul>
);

const mappedChildren = Children.map(parentElement.props.children, child => (
  <li>{child}</li>
));
// mappedChildren est la liste mappée des enfants

Méthodes du cycle de vie des composants React

constructor(props)- Constructeur, appelé lorsque le composant est créé, utilisé pour initialiser l'état et lier les méthodes.

Exemple

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()- Appelé après le montage du composant, généralement utilisé pour des opérations à effet de bord telles que la récupération de données et les abonnements.

Exemple

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // S'abonner aux données après le montage du composant
    this.subscription = subscribeToData(data => {
      this.setState({ data });
    });
  }

  componentWillUnmount() {
    // Se désabonner avant le démontage du composant
    this.subscription.unsubscribe();
  }

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

componentDidUpdate(prevProps, prevState)- Appelé après la mise à jour du composant, généralement utilisé pour réagir aux changements de props ou d'état.

Exemple

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidUpdate(prevProps, prevState) {
    // Mettre à jour les données lorsque les props ou l'état changent
    if (this.props.userID !== prevProps.userID) {
      this.fetchData(this.props.userID);
    }
  }

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

componentWillUnmount()- Appelée avant que le composant ne soit démonté, utilisée pour libérer des ressources telles que le nettoyage des minuteurs et le désabonnement.

Exemple

import React, { Component } from 'react';

class MyComponent extends Component {
  componentWillUnmount() {
    // Nettoyer les ressources avant que le composant ne soit démonté
    clearInterval(this.timerID);
  }

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

static getDerivedStateFromProps(props, state)- Utilisée pour remplacer componentWillReceiveProps, en mettant à jour l'état lorsque les props changent.

Exemple

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)- Déclare une variable d'état et sa fonction de mise à jour.

Exemple

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Vous avez cliqué {count} fois</p>
      <button onClick={() => setCount(count + 1)}>Cliquez-moi</button>
    </div>
  );
}

useEffect(callback, [dependencies])- Déclare une opération d'effet de bord, similaire à une combinaison de componentDidMount et componentDidUpdate.

Exemple

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);
  }, []); // Un tableau vide comme deuxième argument signifie qu'il ne s'exécute que lorsque le composant se monte et se démonte

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

useContext(context)- Obtenir et s'abonner à un contexte React.

Exemple

import React, { useContext } from 'react';

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

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

useReducer(reducer, initialState)- Déclarer un réducteur et une fonction de dispatch pour une logique d'état complexe.

Exemple

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>Compteur: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Incrémenter</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Décrémenter</button>
    </div>
  );
}

useCallback(callback, [dependencies])- Mettre en cache une fonction de rappel pour éviter de la recréer lorsque les dépendances changent.

Exemple

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}>Incrémenter le compteur</button>;
}

useMemo(factory, [dependencies])- Mettre en cache une valeur calculée pour éviter de la recalculer lorsque les dépendances changent.

Exemple

import React, { useMemo } from 'react';

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

  return <div>Valeur coûteuse: {expensiveValue}</div>;
}

useRef(initialValue)- Créez une référence persistante qui peut être utilisée pour accéder aux éléments DOM ou mettre en cache n'importe quelle valeur mutable.

Exemple

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()}>Mettre le focus sur l'entrée</button>
    </>
  );
}

Autres fonctions courantes

ReactDOM.render(element, container[, callback])- Affiche un élément React dans le nœud DOM spécifié.

Exemple

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

const element = <h1>Bonjour, le monde!</h1>;
ReactDOM.render(element, document.getElementById('root'));

ReactDOM.createRoot(container[, options])- Crée une instance racine React, prenant en charge les fonctionnalités de rendu concurrent.

Exemple

import ReactDOM from 'react-dom';

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

ReactDOM.unmountComponentAtNode(container)- Démonte le composant React du nœud DOM spécifié.

Exemple

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

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

ReactDOMServer.renderToString(element)- Affiche un élément React dans une chaîne HTML statique pour le rendu côté serveur.

Exemple

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

const element = <div>Bonjour, le monde!</div>;
const htmlString = ReactDOMServer.renderToString(element);
Autres extensions