L'API haut-niveau de React

L’objet React est le point d’entrée de la bibliothèque React. Si vous chargez React depuis une balise <script>, ces API de haut-niveau sont disponibles depuis l’objet global React. Si vous utilisez npm avec la syntaxe ES6, vous pouvez écrire : import React from 'react'. Si vous utilisez npm avec la syntaxe ES5, vous pouvez écrire : var React = require('react').

Aperçu

Composants

Les composants React vous permettent de découper une interface utilisateur (UI, pour User Interface, NdT) en blocs indépendants et réutilisables, ce qui vous permet de concevoir chaque partie en isolation. Un composant React peut être défini en étendant les classes React.Component ou React.PureComponent.

• React.Component
• React.PureComponent

Si vous n’utilisez pas les classes ES6, vous pouvez utiliser le module create-react-class à la place. Lisez React sans ES6 pour plus de détails.

Un composant React peut aussi être défini via une fonction que l’on pourra choisir d’enrober avec React.memo :

• React.memo

Créer des éléments React

Nous vous recommandons d’utiliser JSX pour définir à quoi ressemblera votre UI. Tous les éléments JSX ne sont que du sucre syntaxique qui cache des appels à React.createElement(). Si vous utilisez JSX, vous ne devriez pas avoir besoin d’appeler les méthodes suivantes :

• createElement()
• createFactory()

Lisez React sans JSX pour plus de détails.

Transformer des éléments

React propose plusieurs API pour manipuler les éléments :

• cloneElement()
• isValidElement()
• React.Children

Fragments

React fournit également un composant particulier pour réaliser le rendu de plusieurs éléments sans avoir à les envelopper avec un autre.

• React.Fragment

Refs

• React.createRef
• React.forwardRef

Suspense

Suspense permet aux composants « d’attendre » quelque chose avant de s’afficher. Pour le moment, Suspense ne prend en charge qu’un seul cas d’usage : le chargement dynamique de composants avec React.lazy. À l’avenir, il permettra de gérer d’autres cas d’usages tels que le chargement de données distantes.

• React.lazy
• React.Suspense

Transitions

Transitions are a new concurrent feature introduced in React 18. They allow you to mark updates as transitions, which tells React that they can be interrupted and avoid going back to Suspense fallbacks for already visible content.

• React.startTransition
• React.useTransition

Hooks

Les Hooks sont une nouveauté de React 16.8. Ils vous permettent d’utiliser les états et d’autres fonctionnalités de React sans avoir à écrire de classes. Les Hooks disposent de leur propre documentation et leur API est détaillée à part :

• Hooks de base

  • useState
  • useEffect
  • useContext

• Hooks supplémentaires

  • useReducer
  • useCallback
  • useMemo
  • useRef
  • useImperativeHandle
  • useLayoutEffect
  • useDebugValue
  • useDeferredValue
  • useTransition
  • useId

• Library Hooks

  • useSyncExternalStore
  • useInsertionEffect

Référence de l’API

React.Component

React.Component est la classe de base utilisée pour créer des composants React avec la syntaxe des classes ES6 :

class Greeting extends React.Component {
  render() {
    return <h1>Bonjour {this.props.name}</h1>;
  }
}

Rendez-vous sur la page de référence de l’API React.Component pour voir la liste complète des méthodes et propriétés de la classe de base React.Component.

React.PureComponent

React.PureComponent est similaire à React.Component. La seule différence est que React.Component n’implémente pas la méthode shouldComponentUpdate(), alors que React.PureComponent l’implémente en réalisant une comparaison de surface de l’état et des propriétés.

Si la fonction render() d’un de vos composants React produit un rendu identique pour le même état et les mêmes propriétés, le faire étendre React.PureComponent devrait améliorer les performances dans certains cas.

Remarque

La méthode shouldComponentUpdate() de React.PureComponent réalise une simple comparaison de surface. Avec des données complexes, elle peut produire des faux négatifs si la structure de données subit des changements profonds. Ne créez des composants avec PureComponent que si vous avez des états et des props simples, et le cas échéant utilisez forceUpdate() si vous savez que vos données ont changé en profondeur. Vous pouvez aussi envisager d’utiliser des objets immuables pour simplifier la comparaison rapide de données imbriquées.

De plus, la méthode shouldComponentUpdate() de React.PureComponent ignore la mise à jour des propriétés de tout l’arbre des composants enfants. Assurez-vous donc que tous les composants enfants sont également « purs ».

React.memo