Bases de React, partie 2

Voici quelques concepts et terminologies React plus avancés :

12. API de contexte

L'API Context fournit un moyen de transmettre des données via l'arborescence des composants sans avoir à transmettre manuellement les accessoires à chaque niveau. Il est utile pour les données globales telles que les thèmes, l'authentification ou les données utilisateur.

Exemple :

const ThemeContext = React.createContext('light');

function ThemedButton() {
  return (
    <ThemeContext.Consumer>
      {theme => <button className={theme}>I am styled by {theme} theme!</button>}
    </ThemeContext.Consumer>
  );
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}

13. 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. Il est souvent utilisé pour modifier directement un élément DOM ou gérer le focus.

Exemple :

import { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

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

14. Composant d'ordre supérieur (HOC)

Un HOC est une fonction qui prend un composant et renvoie un nouveau composant. Il est souvent utilisé pour réutiliser la logique des composants.

Exemple :

function withLogger(WrappedComponent) {
  return function WithLogger(props) {
    console.log('Rendering component');
    return <WrappedComponent {...props} />;
  };
}

const EnhancedComponent = withLogger(MyComponent);

15. React.memo

React.memo est un composant d'ordre supérieur qui permet d'optimiser les performances en mémorisant un composant. Si les accessoires n'ont pas changé, le composant ignorera le nouveau rendu.

Exemple :

const MyComponent = React.memo(function MyComponent(props) {
  return <div>{props.text}</div>;
});

16. utiliser le crochet réducteur

Le hook useReducer est une alternative à useState. C'est utile pour gérer une logique d'état plus complexe, en particulier lorsque l'état dépend de valeurs précédentes.

Exemple :

import { useReducer } from 'react';

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, { count: 0 });

  return (
    <div>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <span>{state.count}</span>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
    </div>
  );
}

17. Réagir aux fragments

React Fragments vous permet de regrouper une liste d'enfants sans ajouter de nœuds supplémentaires au DOM.

Exemple :

function Table() {
  return (
    <>
      <tr>
        <td>Row 1</td>
      </tr>
      <tr>
        <td>Row 2</td>
      </tr>
    </>
  );
}

18. Portails

Les portails fournissent un moyen de restituer les enfants dans un nœud DOM qui existe en dehors de la hiérarchie du composant parent.

Exemple :

import ReactDOM from 'react-dom';

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

19. Limites d'erreur

Les limites d'erreur sont des composants React qui détectent les erreurs JavaScript n'importe où dans leur arborescence de composants enfants, enregistrent ces erreurs et affichent une interface utilisateur de secours.

Exemple :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

20. Chargement paresseux

React prend en charge le chargement paresseux des composants, ce qui signifie que les composants peuvent être chargés de manière asynchrone lorsqu'ils sont requis, améliorant ainsi les performances des applications volumineuses.

Exemple :

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

21. Mode strict

StrictMode est un outil permettant de mettre en évidence les problèmes potentiels dans une application. Il ne restitue aucune interface utilisateur visible mais vérifie les problèmes tels que les méthodes de cycle de vie obsolètes.

Exemple :

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

22. Composants contrôlés ou non contrôlés

Composants contrôlés : éléments de formulaire dont la valeur est contrôlée par l'état React.

Composants non contrôlés : éléments de formulaire dont la valeur est gérée par le DOM.

Example of Controlled Component:

function ControlledInput() {
  const [value, setValue] = useState('');

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

Example of Uncontrolled Component:

function UncontrolledInput() {
  const inputRef = useRef(null);

  return <input type="text" ref={inputRef} />;
}

23. Forage d'hélices

Le Prop Drilling se produit lorsque les données sont transmises à travers plusieurs niveaux de composants pour atteindre un enfant profondément imbriqué. Cela peut être évité en utilisant l'API Context ou des bibliothèques de gestion d'état.

Example of Prop Drilling:

function Grandparent() {
  const name = "John";
  return <Parent name={name} />;
}

function Parent({ name }) {
  return <Child name={name} />;
}

function Child({ name }) {
  return <p>{name}</p>;
}

24. Cycle de vie du rendu

Les composants React ont un cycle de vie avec des méthodes qui sont invoquées à différentes étapes, telles que le montage, la mise à jour et le démontage.

Méthodes de cycle de vie (composants de classe) :

1. - composantDidMount
2. - composantDidUpdate
3. - composantWillUnmount

Exemple :

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentDidUpdate() {
    console.log('Component updated');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>Hello!</div>;
  }
}

25. utiliserRef Hook

Le hook useRef est utilisé pour conserver les valeurs à travers les rendus sans provoquer de nouveau rendu. Il est couramment utilisé pour accéder aux éléments DOM ou stocker des valeurs mutables.

Exemple :

function Timer() {
  const countRef = useRef(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      countRef.current += 1;
      console.log(countRef.current);
    }, 1000);

    return () => clearInterval(intervalId);
  }, []);

  return <p>Check the console to see the timer.</p>;
}

Ces concepts supplémentaires vous aideront à approfondir votre compréhension de React et à aborder des scénarios plus avancés !

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!