Points clés à retenir de ma récente revue des documents React

Ce blog est initialement publié sur Medium

Salut, amis passionnés de React ! J'ai récemment plongé en profondeur dans la documentation React et je souhaite partager mes apprentissages avec vous. Il s'agit d'un guide minimal concis pour ceux qui cherchent à construire une base solide dans React. Décomposons les concepts de base avec des explications simples et des extraits de code.

Cela va être une histoire un peu longue, mais s'il vous plaît, attendez pour saisir tous les concepts fondamentaux de React en même temps. Vous trouverez utile de récapituler et de revisiter ces concepts pour progresser davantage.

Table des matières

• Penser en React
• Composants et JSX
• Accessoires
• Rendu conditionnel
• Listes de rendu
• Composants purs
• Arborescence de l'interface utilisateur
• Interactivité et gestionnaires d'événements
• État
• Composants contrôlés
• Composants non contrôlés
• Réfs
• Prévenir les comportements par défaut
• Propagation d'événements
• Gérer les états complexes
• Contexte
• Effets secondaires
• Les bonnes pratiques de useEffect
• Règles de React
• Crochets personnalisés
• Règles des crochets

Penser en React

React consiste à diviser votre interface utilisateur en composants réutilisables. Lorsque vous créez une application React, commencez par :

1. Briser l'interface utilisateur en une hiérarchie de composants
2. Construire une version statique sans interactivité
3. Identifier la représentation minimale de l'état de l'interface utilisateur
4. Déterminer où votre État devrait vivre
5. Ajout d'un flux de données inverse

Référence : https://react.dev/learn/thinking-in-react

Composants et JSX

Les composants sont les éléments constitutifs des applications React. Ils peuvent être fonctionnels ou de classe (démodés, déconseillés). JSX est une extension de syntaxe qui vous permet d'écrire du code de type HTML dans votre JavaScript.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Références :

• Composants : https://react.dev/learn/your-first-component
• JSX : https://react.dev/learn/writing-markup-with-jsx

Accessoires

Les accessoires sont la façon dont nous transmettons les données des composants parent aux composants enfants. Ils sont en lecture seule et aident à garder nos composants purs.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

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

Référence : https://react.dev/learn/passing-props-to-a-component

Rendu conditionnel

React vous permet de restituer conditionnellement des composants ou des éléments en fonction de certaines conditions.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

Référence : https://react.dev/learn/conditional-rendering

Listes de rendu

Utilisez la fonction map() pour afficher des listes d'éléments dans React. N'oubliez pas d'ajouter un accessoire clé unique à chaque élément.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Référence : https://react.dev/learn/rendering-lists

Composants purs

Les composants purs affichent toujours le même résultat pour les mêmes accessoires et le même état. Ils sont prévisibles et plus faciles à tester.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Référence : https://react.dev/learn/keeping-components-pure

Arborescence de l'interface utilisateur

React construit et maintient une représentation interne de votre interface utilisateur appelée le DOM virtuel. Cela permet à React de mettre à jour efficacement uniquement les parties du DOM réel qui ont changé.

Référence : https://react.dev/learn/understanding-your-ui-as-a-tree

Interactivité et gestionnaires d'événements

React utilise des événements synthétiques pour gérer les interactions des utilisateurs de manière cohérente sur différents navigateurs.

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

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

Référence : https://react.dev/learn/responding-to-events

État

L'état est utilisé pour les données qui changent au fil du temps dans un composant. Utilisez le hook useState pour ajouter un état aux composants fonctionnels.

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

Référence : https://react.dev/learn/state-a-components-memory

Composants contrôlés

Les composants contrôlés ont leur état contrôlé par React.

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

Composants non contrôlés

Les composants non contrôlés gèrent leur état directement sur le DOM.

function PureComponent(props) {
  return <div>{props.value}</div>;
}

Réfs

Les références fournissent un moyen d'accéder aux nœuds DOM ou aux éléments React créés dans la méthode de rendu.

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

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

Prévenir les comportements par défaut

Utilisez PreventDefault() pour arrêter le comportement par défaut du navigateur pour certains événements.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Propagation d'événements

Les événements React se propagent de la même manière que les événements DOM natifs. Vous pouvez utiliser stopPropagation() pour empêcher les événements de se propager.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Gestion des états complexes

Envisagez d'utiliser le hook useReducer ou une bibliothèque de gestion d'état comme Redux ou Zustand pour une logique d'état complexe.

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

Contexte

Le contexte fournit un moyen de transmettre des données à travers l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau.

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Référence : https://react.dev/learn/passing-data-deeply-with-context

Effets secondaires

Les effets secondaires sont des opérations qui affectent quelque chose en dehors de la portée de la fonction en cours d'exécution, comme la récupération de données ou la manipulation du DOM. Utilisez le hook useEffect pour gérer les effets secondaires.

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Les bonnes pratiques de useEffect

1. Incluez toujours toutes les variables dont dépend votre effet dans le tableau de dépendances.
2. Évitez les boucles infinies en examinant attentivement les dépendances de votre effet.
3. Nettoyez les effets secondaires dans la fonction de retour de useEffect.

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

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

Références :

• Vous n'aurez peut-être pas besoin de useEffect : https://react.dev/learn/you-might-not-need-an-effect
• Synchronisation avec des effets : https://react.dev/learn/synchronizing-with-effects
• Cycle de vie des effets réactifs : https://react.dev/learn/lifecycle-of-reactive-effects

Règles de réaction

1. Commencez toujours les noms de composants par une lettre majuscule.
2. Fermez toutes les balises, y compris les balises à fermeture automatique.
3. Ne modifiez pas les accessoires directement.
4. Gardez les composants purs lorsque cela est possible.

Référence : https://react.dev/reference/rules

Crochets personnalisés

Les hooks personnalisés vous permettent d'extraire la logique des composants dans des fonctions réutilisables.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Règles des crochets

1. Appelez uniquement les hooks au niveau supérieur de votre composant.
2. Appelez uniquement les hooks à partir de composants de fonction React ou de hooks personnalisés.
3. Utilisez eslint-plugin-react-hooks pour appliquer ces règles.

Référence : https://react.dev/reference/rules/rules-of-hooks

C'est la fin de notre voyage React ! N'oubliez pas que la meilleure façon d'apprendre est de faire. Commencez à créer des projets, expérimentez ces concepts et n'hésitez pas à vous plonger dans la documentation React lorsque vous avez besoin de plus de détails. Bon codage !

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!