So erhalten Sie Daten in React

Methoden zum Abrufen von Daten in React: 1. Verwenden Sie Lebenszyklusmethoden, um Daten anzufordern. 2. Verwenden Sie Hooks, um Daten abzurufen. 3. Verwenden Sie Suspense, um Daten abzurufen.

Die Betriebsumgebung dieses Tutorials: Windows10-System, React16, dieser Artikel gilt für alle Computermarken.

Methoden zum Abrufen von Daten:

1. Verwenden Sie die Lebenszyklusmethode, um Daten anzufordern.

Die Anwendung Employees.org führt zwei Dinge aus:

1. Erhalten Sie 20 Mitarbeiter, sobald Sie das Programm betreten .

2. Sie können Mitarbeiter nach Filterbedingungen filtern.

Bevor wir diese beiden Anforderungen implementieren, schauen wir uns die beiden Lebenszyklusmethoden von Reaktionsklassenkomponenten an:

• componentDidMount(): wird ausgeführt, nachdem die Komponente gemountet wurdecomponentDidMount()：组件挂载后执行

• componentDidUpdate(prevProps):当 props 或 state 改变时执行

组件 e6434c86b85e81f3111e15b50dacf7fc使用上面两个生命周期方法实现获取逻辑：

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} />;
  }
}

打开codesandbox可以查看e6434c86b85e81f3111e15b50dacf7fc获取过程。

e6434c86b85e81f3111e15b50dacf7fc有一个获取数据的异步方法fetch()。在获取请求完成后，使用 setState 方法来更新employees。

this.fetch()在componentDidMount()生命周期方法中执行:它在组件初始渲染时获取员工数据。

当咱们关键字进行过滤时，将更新 props.query 。每当 props.query 更新，componentDidUpdate()就会重新执行this.fetch()。

虽然生命周期方法相对容易掌握，但是基于类的方法存在样板代码使重用性变得困难。

优点

这种方法很容易理解:componentDidMount()在第一次渲染时获取数据，而componentDidUpdate()在props更新时重新获取数据。

缺点

样板代码

基于类的组件需要继承React.Component，在构造函数中执行 super(props) 等等。

this：使用 this 关键字很麻烦。

代码重复

componentDidMount()和componentDidUpdate()中的代码大部分是重复的。

很难重用

员工获取逻辑很难在另一个组件中重用。

 

2.使用 Hooks 获取数据

Hooks 是基于类获取数据方式更好的选择。作为简单的函数，Hooks 不像类组件那样还要继承，并且也更容易重用。

简单回忆一下useEffect(callback[, deps]) Hook。这个hook在挂载后执行callback ，并且当依赖项deps发生变化时重新渲染。

如下示例所示，在e6434c86b85e81f3111e15b50dacf7fc中使用useEffect()获取员工数据：

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} />;
}

打开codesandbox可以查看useEffect()如何获取数据。

可以看到使用 Hooks 的 e6434c86b85e81f3111e15b50dacf7fc比使用类组件方式简单了很多。

在e6434c86b85e81f3111e15b50dacf7fc函数组件中的useEffect(fetch， [query])，初始渲染之后执行fetch回调。此外，当依赖项 query更新时也会重新执行 fetch 方法。

但仍有优化的空间。Hooks 允许咱们从e6434c86b85e81f3111e15b50dacf7fc组件中提取雇员获取逻辑，来看看：

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} />;
}

从useEmployeesFetch()提到所需要的值。组件e6434c86b85e81f3111e15b50dacf7fc没有相应的获取逻辑，只负责渲染界面工作。

更好的是，可以在需要获取雇员的任何其他组件中重用useEmployeesFetch()。

优点

• 清楚和简单，Hooks没有样板代码，因为它们是普通的函数。

• 可重用性，在 Hooks 中实现的获取数据逻辑很容易重用。

缺点

需要前置知识

Hooks 有点违反直觉，因此在使用之前必须理解它们，Hooks 依赖于闭包，所以一定要很好地了解它们。

必要性

使用Hooks，仍然必须使用命令式方法来执行数据获取。

佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

3.使用 suspense 获取数据

Suspense 提供了一种声明性方法来异步获取React中的数据。

注意：截至2019年11月，Suspense 处于试验阶段。

bb06e69d307cb52103d07d8f9dd385e5包装执行异步操作的组件:

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

数据获取时，Suspense将显示fallback中的内容，当获取完数据后，Suspense将使用获取到数据渲染790d49bba4c59bf74dba70d8d1e86ab7。

来看看怎么使用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} />;
}

打开codesandbox可以查看Suspense如何获取数据。

e6434c86b85e81f3111e15b50dacf7fc使用Suspense处理组件将获取到数据传递给5016a9874c4310a75bdaf0ae7b380374

🎜componentDidUpdate(prevProps): Wird ausgeführt, wenn sich Requisiten oder Status ändern. 🎜 Sehen Sie sich den e6434c86b85e81f3111e15b50dacf7fc-Akquiseprozess an. 🎜🎜e6434c86b85e81f3111e15b50dacf7fc verfügt über eine asynchrone Methode fetch() zum Abrufen von Daten. Nachdem die Get-Anfrage abgeschlossen ist, verwenden Sie die setState-Methode, um die Mitarbeiter zu aktualisieren. 🎜🎜this.fetch() wird in der Lebenszyklusmethode componentDidMount() ausgeführt: Es ruft die Mitarbeiterdaten ab, wenn die Komponente zum ersten Mal gerendert wird. 🎜🎜Wenn unsere Schlüsselwörter gefiltert werden, wird props.query aktualisiert. Immer wenn props.query aktualisiert wird, führt ComponentDidUpdate() this.fetch() erneut aus. 🎜🎜Während Lebenszyklusmethoden relativ einfach zu beherrschen sind, erschwert der bei klassenbasierten Methoden vorhandene Boilerplate-Code die Wiederverwendbarkeit. 🎜🎜🎜Vorteile🎜🎜🎜Diese Methode ist leicht zu verstehen: componentDidMount() ruft die Daten beim ersten Rendern ab, während componentDidUpdate() sie erneut abruft, wenn Requisiten vorhanden sind aktualisierte Daten. 🎜🎜🎜Nachteile🎜🎜🎜Boilerplate-Code🎜🎜Klassenbasierte Komponenten müssen React.Component erben, super(props) im Konstruktor ausführen usw. 🎜🎜dies: Die Verwendung dieses Schlüsselworts ist problematisch. 🎜🎜Codeduplizierung🎜🎜Der größte Teil des Codes in componentDidMount() und componentDidUpdate() wird wiederholt. 🎜🎜Schwierig wiederzuverwenden🎜🎜Logik zur Mitarbeiterakquise lässt sich nur schwer in einer anderen Komponente wiederverwenden. 🎜🎜 🎜🎜🎜2. Verwenden Sie Hooks, um Daten abzurufen. 🎜🎜🎜Hooks ist eine bessere Wahl, um Daten basierend auf Klassen zu erhalten. Als einfache Funktionen müssen Hooks nicht wie Klassenkomponenten vererbt werden und sind einfacher wiederzuverwenden. 🎜🎜Erinnern Sie sich kurz an den Hook useEffect(callback[, deps]). Dieser Hook führt den Rückruf nach dem Mounten aus und rendert erneut, wenn sich die Abhängigkeitsabhängigkeiten ändern. 🎜🎜Wie im folgenden Beispiel gezeigt, wird useEffect() verwendet, um Mitarbeiterdaten in e6434c86b85e81f3111e15b50dacf7fc abzurufen: 🎜rrreee🎜Öffnen Sie codesandbox, um zu sehen, wie useEffect() Daten abruft. 🎜🎜Sie sehen, dass die Verwendung von Hooks' e6434c86b85e81f3111e15b50dacf7fc viel einfacher ist als die Verwendung von Klassenkomponenten. 🎜🎜In useEffect(fetch, [query]) in der e6434c86b85e81f3111e15b50dacf7fc-Funktionskomponente wird der Fetch-Callback nach dem ersten Rendern ausgeführt. Darüber hinaus wird die Abrufmethode auch erneut ausgeführt, wenn die Abhängigkeitsabfrage aktualisiert wird. 🎜🎜Aber es gibt noch Raum für Optimierungen. Mit Hooks können wir die Mitarbeiterabruflogik aus der e6434c86b85e81f3111e15b50dacf7fc-Komponente extrahieren. Werfen wir einen Blick darauf: 🎜rrreee🎜 erwähnt die erforderlichen Werte aus useEmployeesFetch(). Die Komponente e6434c86b85e81f3111e15b50dacf7fc verfügt über keine entsprechende Erfassungslogik und ist nur für die Darstellung der Schnittstelle verantwortlich. 🎜🎜 Noch besser: useEmployeesFetch() kann in jeder anderen Komponente wiederverwendet werden, die Mitarbeiter abrufen muss. 🎜🎜🎜Vorteile🎜🎜🎜🎜🎜Klar und einfach: Hooks haben keinen Boilerplate-Code, da es sich um gewöhnliche Funktionen handelt. 🎜🎜🎜Wiederverwendbarkeit: Die in Hooks implementierte Datenerfassungslogik ist einfach wiederzuverwenden. 🎜🎜🎜Nachteile🎜🎜🎜Erfordert Vorkenntnisse🎜🎜Haken sind etwas kontraintuitiv, daher müssen Sie sie verstehen, bevor Sie sie verwenden. Haken basieren auf Verschlüssen, also stellen Sie sicher, dass Sie sie gut verstehen. 🎜🎜🎜Notwendigkeit🎜🎜🎜Bei Hooks müssen Sie immer noch einen zwingenden Ansatz verwenden, um den Datenabruf durchzuführen. 🎜🎜Foshan vi design https://www.houdianzi.com/fsvi/ Pea-Ressourcensuchverzeichnis https://55wd.com🎜🎜🎜3. Verwenden Sie Suspense, um Daten abzurufen. 🎜🎜🎜Suspense bietet einen deklarativen Ansatz zum asynchronen Abrufen von Daten in Reagieren. 🎜🎜Hinweis: Seit November 2019 befindet sich Suspense in der experimentellen Phase. 🎜🎜bb06e69d307cb52103d07d8f9dd385e5 Paketiert Komponenten, die asynchrone Vorgänge ausführen: 🎜rrreee🎜Wenn Daten abgerufen werden, zeigt Suspense den Inhalt im Fallback an. Wenn die Daten abgerufen werden, verwendet Suspense die abgerufenen Daten render 790d49bba4c59bf74dba70d8d1e86ab7. 🎜🎜Sehen wir uns an, wie Suspense verwendet wird: 🎜rrreee🎜Öffnen Sie Codesandbox, um zu sehen, wie Suspense Daten erhält. 🎜🎜e6434c86b85e81f3111e15b50dacf7fc verwendet die Suspense-Verarbeitungskomponente, um die erhaltenen Daten an die Komponente 5016a9874c4310a75bdaf0ae7b380374 zu übergeben. 🎜Das

in resource.employees5016a9874c4310a75bdaf0ae7b380374 ist ein speziell verpacktes Versprechen, das hinter den Kulissen mit Suspense kommuniziert. Auf diese Weise weiß Suspense, wie lange es dauern wird, das Rendern von 5016a9874c4310a75bdaf0ae7b380374 anzuhalten, und kann mit dem Rendern der Arbeit beginnen, wenn die Ressource bereit ist.

Der größte Vorteil ist: Suspense verarbeitet asynchrone Vorgänge deklarativ und synchron. Komponenten verfügen nicht über eine komplexe Datenabruflogik, sondern nutzen Ressourcen auf deklarative Weise zum Rendern von Inhalten. Es gibt keinen Lebenszyklus innerhalb der Komponente, keine Hooks, Async/Warten, keine Rückrufe: nur die Anzeigeschnittstelle.

Vorteile

Deklarativ

Suspense Führen Sie asynchrone Vorgänge in React deklarativ aus.

Einfach

Deklarativer Code ist einfach zu verwenden, diese Komponenten verfügen über keine komplexe Datenabruflogik.

Lose Kopplung und Abrufimplementierung

Komponenten, die Suspense verwenden, sehen nicht, wie Daten abgerufen werden: Verwenden Sie REST oder GraphQL. Suspense legt eine Grenze fest, um zu verhindern, dass Abrufdetails in die Komponente gelangen.

Standardstatus

Wenn mehrere Get-Vorgänge angefordert werden, verwendet Suspense die neueste Get-Anfrage.

4. Zusammenfassung

Lebenszyklusmethoden waren lange Zeit die einzige Lösung für die Datenbeschaffung. Deren Verwendung zum Abrufen von Daten bringt jedoch viele Probleme mit dem Standardcode, der Duplizierung und der Wiederverwendbarkeit mit sich.

Verwandte kostenlose Lernempfehlungen: JavaScript (Video)

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Daten in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!