Comment obtenir des données en réaction

Méthodes pour obtenir des données en réaction : 1. Utiliser des méthodes de cycle de vie pour demander des données ; 2. Utiliser des Hooks pour obtenir des données 3. Utiliser le suspense pour obtenir des données.

L'environnement d'exploitation de ce tutoriel : système Windows10, React16, cet article est applicable à toutes les marques d'ordinateurs.

Méthodes pour obtenir des données en réaction :

1. Utiliser les méthodes du cycle de vie pour demander des données

Application Employees.org Faites deux choses :

1. Obtenez 20 employés dès votre entrée dans le programme.

2. Vous pouvez filtrer les employés par conditions de filtrage.

Avant d'implémenter ces deux exigences, passons en revue les deux méthodes de cycle de vie des composants de la classe React :

• componentDidMount() : exécuté après le montage du composant

• componentDidUpdate(prevProps) : exécuter lorsque les accessoires ou l'état changent.

le composant e6434c86b85e81f3111e15b50dacf7fc utilise les deux méthodes de cycle de vie ci-dessus pour implémenter la logique d'acquisition :

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";
class EmployeesPage extends Component {
  constructor(props) {
    super(props);
    this.state = { employees: [], isFetching: true };
  }
  componentDidMount() {
    this.fetch();
  }
  componentDidUpdate(prevProps) {
    if (prevProps.query !== this.props.query) {
      this.fetch();
    }
  }
  async fetch() {
    this.setState({ isFetching: true });
    const employees = await fetchEmployees(this.props.query);
    this.setState({ employees, isFetching: false });
  }
  render() {
    const { isFetching, employees } = this.state;
    if (isFetching) {
      return <div>获取员工数据中...</div>;
    }
    return <EmployeesList employees={employees} />;
  }
}

Ouvrez codesandbox pour voir le e6434c86b85e81f3111e15b50dacf7fc processus d'acquisition.

e6434c86b85e81f3111e15b50dacf7fcIl existe une méthode asynchrone fetch() pour obtenir des données. Une fois la demande get terminée, utilisez la méthode setState pour mettre à jour les employés.

this.fetch() est exécuté dans la méthode de cycle de vie componentDidMount() : il obtient les données de l'employé lors du rendu initial du composant.

Lorsque notre mot-clé est filtré, props.query sera mis à jour. Chaque fois que props.query est mis à jour, composantDidUpdate() réexécutera this.fetch().

Bien que les méthodes de cycle de vie soient relativement faciles à maîtriser, les méthodes basées sur les classes ont un code passe-partout qui rend la réutilisabilité difficile.

Avantages

Cette approche est facile à comprendre : componentDidMount() récupère les données lors du premier rendu, et componentDidUpdate() récupère les données lorsque les accessoires sont mis à jour .

Inconvénients

Code Boilerplate

Les composants basés sur les classes doivent hériter de React.Component, s'exécuter dans le constructeur super(props) et ainsi de suite.

this : L'utilisation du mot-clé this est gênante.

Duplication de code

Le code dans componentDidMount() et componentDidUpdate() est en grande partie dupliqué.

Difficile à réutiliser

La logique d'acquisition d'employés est difficile à réutiliser dans un autre composant.

2. Utilisez Hooks pour obtenir des données

Hooks est un meilleur choix pour obtenir des données basées sur les classes. En tant que fonctions simples, les Hooks n'ont pas besoin d'être hérités comme les composants de classe et sont plus faciles à réutiliser.

Rappelez-vous brièvementuseEffect(callback[, deps]) Hook. Ce hook exécute le rappel après le montage et effectue un nouveau rendu lorsque les dépendances changent.

Comme le montre l'exemple suivant, useEffect() est utilisé pour obtenir les données des employés dans e6434c86b85e81f3111e15b50dacf7fc :

import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";
function EmployeesPage({ query }) {
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);
  useEffect(function fetch() {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

Ouvrez codesandbox pour voir comment useEffect() obtient les données.

Vous pouvez voir que l'utilisation de Hooks pour e6434c86b85e81f3111e15b50dacf7fc est beaucoup plus simple que l'utilisation de composants de classe.

Dans useEffect(fetch， [query]) dans le composant de fonction e6434c86b85e81f3111e15b50dacf7fc, le rappel de récupération est exécuté après le rendu initial. De plus, la méthode fetch sera également réexécutée lorsque la requête de dépendance sera mise à jour.

Mais il y a encore place à l'optimisation. Les hooks nous permettent d'extraire la logique d'acquisition d'employés du composant e6434c86b85e81f3111e15b50dacf7fc, jetons un coup d'œil :

import React, { useState } from 'react';
import EmployeesList from "./EmployeesList";
import { fetchEmployees } from "./fake-fetch";
function useEmployeesFetch(query) { // 这行有变化
  const [isFetching, setFetching] = useState(false);
  const [employees, setEmployees] = useState([]);
  useEffect(function fetch {
    (async function() {
      setFetching(true);
      setEmployees(await fetchEmployees(query));
      setFetching(false);
    })();
  }, [query]);
  return [isFetching, employees];
}
function EmployeesPage({ query }) {
  const [employees, isFetching] = useEmployeesFetch(query); // 这行有变化
  
  if (isFetching) {
    return <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

mentionne la valeur requise de useEmployeesFetch(). Le composant e6434c86b85e81f3111e15b50dacf7fc n'a pas de logique d'acquisition correspondante et est uniquement responsable du rendu de l'interface.

Mieux encore, useEmployeesFetch() peut être réutilisé dans tout autre composant nécessitant d'attirer des employés.

Avantages

• Clairs et simples, les Hooks n'ont pas de code passe-partout car ce sont des fonctions ordinaires.

• Réutilisabilité, la logique d'acquisition de données implémentée dans Hooks est facile à réutiliser.

Inconvénients

Nécessite des connaissances préalables

Les crochets sont un peu contre-intuitifs, vous devez donc les comprendre avant de les utiliser, les crochets fermetures de dépendances, alors assurez-vous de bien les comprendre.

Nécessité

Avec Hooks, vous devez toujours utiliser une approche impérative pour effectuer la récupération de données.

Foshan vi design https://www.houdianzi.com/fsvi/ Répertoire de recherche de ressources Pea https://55wd.com

Utilisez le suspense pour obtenir des données

Suspense fournit un moyen déclaratif d'obtenir des données de manière asynchrone dans React.

Remarque : depuis novembre 2019, Suspense est en phase expérimentale.

Composants du package qui effectuent des opérations asynchrones : bb06e69d307cb52103d07d8f9dd385e5

<Suspense fallback={<span>Fetch in progress...</span>}>
  <FetchSomething />
</Suspense>

Lorsque les données sont obtenues, Suspense affichera le contenu dans la solution de secours. Lorsque les données sont obtenues, Suspense effectuera le rendu en utilisant les données obtenues.

. 790d49bba4c59bf74dba70d8d1e86ab7

Voyons comment utiliser Suspense :

import React, { Suspense } from "react";
import EmployeesList from "./EmployeesList";
function EmployeesPage({ resource }) {
  return (
    <Suspense fallback={<h1>Fetching employees....</h1>}>
      <EmployeesFetch resource={resource} />
    </Suspense>
  );
}
function EmployeesFetch({ resource }) {
  const employees = resource.employees.read();
  return <EmployeesList employees={employees} />;
}

Ouvrez codesandbox pour voir comment Suspense obtient les données.

Utilisez le composant de traitement Suspense pour transmettre les données obtenues au composant e6434c86b85e81f3111e15b50dacf7fc. 5016a9874c4310a75bdaf0ae7b380374Le

dans resource.employees5016a9874c4310a75bdaf0ae7b380374 est une promesse spécialement emballée qui communique avec Suspense dans les coulisses. De cette façon, Suspense sait combien de temps il faudra pour « suspendre » le rendu de 5016a9874c4310a75bdaf0ae7b380374 et peut commencer le travail de rendu lorsque la ressource est prête.

Le plus gros avantage est le suivant : Suspense gère les opérations asynchrones de manière déclarative et synchrone. Les composants n'ont pas de logique de récupération de données complexe, mais utilisent les ressources de manière déclarative pour restituer le contenu. Il n'y a pas de cycle de vie à l'intérieur du composant, pas de Hooks, d'async/wait, pas de rappels : seulement l'interface d'affichage.

Avantages

Déclaratif

Suspense effectue des opérations asynchrones dans React de manière déclarative.

Simple

Le code déclaratif est simple à utiliser et ces composants n'ont pas de logique de récupération de données complexe.

Couplage lâche et implémentation de récupération

Les composants utilisant Suspense ne voient pas comment récupérer des données : utilisez REST ou GraphQL. Suspense définit une limite pour empêcher les détails de récupération de s'infiltrer dans le composant.

Statut standard

Si plusieurs opérations d'obtention sont demandées, Suspense utilisera la dernière demande d'obtention.

4. Résumé

Pendant longtemps, les méthodes de cycle de vie ont été la seule solution pour obtenir des données. Cependant, leur utilisation pour obtenir des données entraîne de nombreux problèmes de code passe-partout, de duplication et de réutilisation.

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

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!