Hacks React.js utiles que tout développeur devrait connaître

React.js est devenu l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur, en particulier des applications monopage. Son architecture basée sur des composants et son rendu efficace en font un favori des développeurs. Que vous soyez débutant ou développeur expérimenté, il y a toujours de nouveaux trucs et astuces à apprendre pour rendre votre processus de développement plus efficace et votre code plus élégant. Vous trouverez ci-dessous 11 conseils React.js utiles que tout développeur devrait connaître :

1. Utiliser des composants fonctionnels avec des Hooks

Avec l'introduction de React Hooks, les composants fonctionnels sont plus puissants que jamais. Les hooks vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classes. Cela rend votre code plus propre et plus facile à comprendre.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

2. Utiliser le composant mémoire React.memo

Pour optimiser les performances, vous pouvez utiliser React.memo pour mémoriser les composants de fonction. En comparant les accessoires, effectuez un nouveau rendu uniquement lorsque les accessoires changent, évitant ainsi un nouveau rendu inutile.

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}</div>;
});

export default MemoizedComponent;

3. Utilisez useEffect pour gérer les effets secondaires

le hook useEffect est utilisé pour effectuer des effets secondaires dans les composants de fonction. Il peut être utilisé pour la récupération de données, l'abonnement ou les modifications manuelles du DOM.

import React, { useEffect, useState } from 'react';

const DataFetcher = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}

: 'Loading...'}

); }; export default DataFetcher;

Copier après la connexion

4. Hooks personnalisés pour implémenter une logique réutilisable

Les Hooks personnalisés vous permettent d'extraire et de réutiliser la logique dans différents composants. Cela favorise la réutilisabilité du code et maintient les composants propres.

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useFetch;

5. Rendu conditionnel utilisant l'évaluation de court-circuit

Utilisez l'évaluation des courts-circuits pour simplifier le rendu conditionnel. Cela rend votre JSX plus concis et lisible.

const ConditionalRender = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn && <p>Welcome back!</p>}
      {!isLoggedIn && <p>Please log in.</p>}
    </div>
  );
};

export default ConditionalRender;

6. Partage de code à l'aide de React.lazy

Le fractionnement du code permet de réduire le temps de chargement initial de votre application en divisant le code en plusieurs packages pouvant être chargés à la demande.

import React, { Suspense, lazy } from 'react';

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

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

export default App;

7. Utilisez les limites d'erreur pour une gestion élégante des erreurs

Les limites d'erreur peuvent détecter les erreurs JavaScript n'importe où dans son arborescence de composants enfants, enregistrer ces erreurs et afficher une interface utilisateur alternative au lieu d'une arborescence de composants en panne.

import React from 'react';

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

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

  componentDidCatch(error, errorInfo) {
    console.error(error, errorInfo);
  }

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

    return this.props.children;
  }
}

export default ErrorBoundary;

8. Regrouper les éléments à l'aide de React.Fragment

React.Fragment vous permet de regrouper une liste d'éléments enfants sans ajouter de nœuds supplémentaires au DOM. Ceci est particulièrement utile lorsque vous devez renvoyer plusieurs éléments d'un composant.

const List = () => {
  return (
    <React.Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </React.Fragment>
  );
};

export default List;

9. Composants d'ordre supérieur (HOC) pour la réutilisation du code

Les composants d'ordre supérieur (HOC) sont un modèle dans React permettant de réutiliser la logique des composants. Un HOC est une fonction qui prend un composant et renvoie un nouveau composant.

const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component mounted');
    }

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

export default withLogger;

10. Utilisez React.Context pour la gestion globale de l'état

React.Context fournit un moyen de transmettre des données à travers l'arborescence des composants sans transmettre manuellement d'accessoires à chaque couche. Ceci est utile pour gérer l’état global.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

11. Utilisez React.PureComponent pour optimiser les performances

React.PureComponent est similaire à React.Component, mais il utilise des accessoires peu profonds et une comparaison d'état pour implémenter ShouldComponentUpdate. Cela peut améliorer les performances en réduisant les nouveaux rendus inutiles.

import React from 'react';

const MemoizedComponent = React.memo(({ value }) => {
  console.log('Rendering...');
  return <div>{value}</div>;
});

export default MemoizedComponent;

Conclusion

React.js est une bibliothèque puissante qui fournit un large éventail de fonctionnalités et de bonnes pratiques pour aider les développeurs à créer des applications efficaces et faciles à maintenir. En tirant parti de ces 11 conseils, vous pouvez rationaliser votre processus de développement, améliorer les performances et écrire du code plus propre et plus réutilisable. Que vous débutiez avec React ou que vous cherchiez à améliorer vos compétences, ces conseils vous aideront à devenir un développeur React plus compétent.

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!