반응에서 데이터를 얻는 방법: 1. 데이터를 요청하기 위해 수명 주기 방법을 사용합니다. 2. 데이터를 얻기 위해 후크를 사용합니다. 3. 데이터를 얻기 위해 서스펜스를 사용합니다.
이 튜토리얼의 운영 환경: windows10 시스템, React16, 이 기사는 모든 브랜드의 컴퓨터에 적용 가능합니다.
반응 데이터를 얻는 방법:
1. 수명 주기 방법을 사용하여 데이터를 요청합니다.
Employees.org 애플리케이션은 두 가지 작업을 수행합니다.
1 프로그램에 참여하자마자 직원 20명을 확보합니다. .
2. 조건을 필터링하여 직원을 필터링할 수 있습니다.
이 두 가지 요구 사항을 구현하기 전에 반응 클래스 구성 요소의 두 가지 수명 주기 방법을 검토해 보겠습니다.
comComponentDidMount(): 구성 요소가 마운트된 후 실행componentDidMount()：组件挂载后执行
componentDidUpdate(prevProps):当 props 或 state 改变时执行
组件 <EmployeesPage>使用上面两个生命周期方法实现获取逻辑：
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可以查看<EmployeesPage>获取过程。
<EmployeesPage>有一个获取数据的异步方法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发生变化时重新渲染。
如下示例所示，在<EmployeesPage>中使用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 的 <EmployeesPage>比使用类组件方式简单了很多。
在<EmployeesPage>函数组件中的useEffect(fetch， [query])，初始渲染之后执行fetch回调。此外，当依赖项 query更新时也会重新执行 fetch 方法。
但仍有优化的空间。Hooks 允许咱们从<EmployeesPage>组件中提取雇员获取逻辑，来看看：
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()提到所需要的值。组件<EmployeesPage>没有相应的获取逻辑，只负责渲染界面工作。
更好的是，可以在需要获取雇员的任何其他组件中重用useEmployeesFetch()。
优点
清楚和简单，Hooks没有样板代码，因为它们是普通的函数。
可重用性，在 Hooks 中实现的获取数据逻辑很容易重用。
缺点
需要前置知识
Hooks 有点违反直觉，因此在使用之前必须理解它们，Hooks 依赖于闭包，所以一定要很好地了解它们。
必要性
使用Hooks，仍然必须使用命令式方法来执行数据获取。
佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com
3.使用 suspense 获取数据
Suspense 提供了一种声明性方法来异步获取React中的数据。
注意：截至2019年11月，Suspense 处于试验阶段。
<Suspense>包装执行异步操作的组件:
<Suspense fallback={<span>Fetch in progress...</span>}>
<FetchSomething />
</Suspense>数据获取时，Suspense将显示fallback中的内容，当获取完数据后，Suspense将使用获取到数据渲染<FetchSomething />。
来看看怎么使用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如何获取数据。
<EmployeesPage>使用Suspense处理组件将获取到数据传递给<EmployeesFetch>
comComponentDidUpdate(prevProps): props 또는 상태가 변경될 때 실행됩니다🎜🎜Component <EmployeesPage>는 위의 두 가지 수명 주기 메서드를 사용하여 획득 논리를 구현합니다. 🎜rrreee🎜Opencodesandbox는 <EmployeesPage> 인수 프로세스를 확인하세요. 🎜🎜<EmployeesPage>에는 데이터를 가져오는 비동기 메서드 fetch()가 있습니다. 가져오기 요청이 완료된 후 setState 메서드를 사용하여 직원을 업데이트합니다. 🎜🎜this.fetch()는 comComponentDidMount() 수명 주기 메서드에서 실행됩니다. 구성 요소가 처음 렌더링될 때 직원 데이터를 가져옵니다. 🎜🎜키워드가 필터링되면 props.query가 업데이트됩니다. props.query가 업데이트될 때마다, componentDidUpdate()는 this.fetch()를 다시 실행합니다. 🎜🎜라이프사이클 메소드는 상대적으로 익히기가 쉽지만, 클래스 기반 메소드에 존재하는 상용구 코드는 재사용을 어렵게 만듭니다. 🎜🎜🎜장점🎜🎜🎜이 메서드는 이해하기 쉽습니다. comComponentDidMount()는 첫 번째 렌더링에서 데이터를 가져오고, props가 업데이트된 데이터. 🎜🎜🎜단점🎜🎜🎜보일러플레이트 코드🎜🎜클래스 기반 구성 요소는 React.Component를 상속하고 생성자에서 super(props)를 실행해야 합니다. 🎜🎜this: this 키워드를 사용하는 것은 번거롭습니다. 🎜🎜코드 중복🎜🎜comComponentDidMount() 및 comComponentDidUpdate()의 코드가 대부분 반복됩니다. 🎜🎜재사용이 어렵습니다🎜🎜직원 획득 로직은 다른 구성요소에서 재사용하기 어렵습니다. 🎜🎜 🎜🎜🎜2. Hooks를 사용하여 데이터 얻기 🎜🎜🎜Hooks는 클래스 기반 데이터를 얻는 데 더 나은 선택입니다. 간단한 기능인 Hooks는 클래스 구성요소처럼 상속될 필요가 없으며 재사용하기가 더 쉽습니다. 🎜🎜 useEffect(callback[, deps]) Hook을 간략하게 기억해 보세요. 이 후크는 마운트 후 콜백을 실행하고 종속성 deps가 변경되면 다시 렌더링합니다. 🎜🎜다음 예에 표시된 것처럼 useEffect()는 <EmployeesPage>에서 직원 데이터를 얻는 데 사용됩니다. 🎜rrreee🎜codesandbox를 열어 useEffect()가 데이터를 얻는 방법을 확인하세요. 🎜🎜Hooks의 <EmployeesPage>를 사용하는 것이 클래스 구성 요소를 사용하는 것보다 훨씬 간단하다는 것을 알 수 있습니다. 🎜🎜<EmployeesPage> 함수 구성 요소의 useEffect(fetch, [query])에서 가져오기 콜백은 초기 렌더링 후에 실행됩니다. 또한 종속성 쿼리가 업데이트되면 가져오기 메서드도 다시 실행됩니다. 🎜🎜하지만 아직 최적화의 여지가 있습니다. 후크를 사용하면 <EmployeesPage> 구성 요소에서 직원 검색 논리를 추출할 수 있습니다. 살펴보겠습니다. 🎜rrreee🎜는 useEmployeesFetch()에서 필요한 값을 언급합니다. <EmployeesPage> 구성요소에는 해당 획득 논리가 없으며 인터페이스 렌더링만 담당합니다. 🎜🎜 더 좋은 점은 직원을 확보해야 하는 다른 구성 요소에서 useEmployeesFetch()를 재사용할 수 있다는 것입니다. 🎜🎜🎜장점🎜🎜🎜🎜🎜명확하고 단순합니다. Hooks는 일반적인 기능이므로 상용구 코드가 없습니다. 🎜🎜🎜재사용성, Hooks에 구현된 데이터 수집 로직은 재사용하기 쉽습니다. 🎜🎜🎜단점🎜🎜🎜사전 지식 필요🎜🎜Hook은 다소 직관에 어긋나므로 사용하기 전에 먼저 이해해야 합니다. Hook은 클로저에 의존하므로 잘 이해해야 합니다. 🎜🎜🎜Necessity🎜🎜🎜Hooks를 사용하더라도 데이터 검색을 수행하려면 여전히 명령형 접근 방식을 사용해야 합니다. 🎜🎜Foshan vi 디자인 https://www.houdianzi.com/fsvi/ Pea 리소스 검색 디렉터리 https://55wd.com🎜🎜🎜3. Suspense를 사용하여 데이터 가져오기🎜🎜🎜Suspense는 비동기 데이터 가져오기에 대한 선언적 접근 방식을 제공합니다. 반응에서. 🎜🎜참고: 2019년 11월 현재 Suspense는 실험 단계에 있습니다. 🎜🎜<Suspense>비동기 작업을 수행하는 구성 요소를 래핑합니다. 🎜rrreee🎜 데이터를 얻으면 Suspense는 대체 콘텐츠를 표시합니다. 데이터를 얻으면 Suspense는 얻은 데이터를 사용하여 다음을 수행합니다. <FetchSomething />를 렌더링합니다. 🎜🎜Suspense 사용 방법을 살펴보겠습니다. 🎜rrreee🎜 Suspense가 데이터를 얻는 방법을 보려면 코드 샌드박스를 엽니다. 🎜🎜<EmployeesPage>는 Suspense 처리 구성 요소를 사용하여 얻은 데이터를 <EmployeesFetch> 구성 요소에 전달합니다. 🎜<EmployeesFetch>의 resource.employees는 뒤에서 Suspense와 소통하는 특별히 포장된 Promise입니다. 이러한 방식으로 Suspense는 <EmployeesFetch>의 렌더링을 "일시 중지"하는 데 걸리는 시간을 알고 리소스가 준비되면 렌더링 작업을 시작할 수 있습니다.
가장 큰 장점은 Suspense가 비동기 작업을 선언적 및 동기적 방식으로 처리한다는 것입니다. 구성 요소에는 복잡한 데이터 검색 논리가 없지만 선언적 방식으로 리소스를 사용하여 콘텐츠를 렌더링합니다. 구성 요소 내부에는 수명 주기가 없으며 후크, 비동기/대기, 콜백이 없으며 디스플레이 인터페이스만 있습니다.
장점
Declarative
Suspense React에서 선언적 방식으로 비동기 작업을 수행합니다.
Simple
선언적 코드는 사용이 간단하며 이러한 구성 요소에는 복잡한 데이터 가져오기 논리가 없습니다.
느슨한 결합 및 가져오기 구현
Suspense를 사용하는 구성 요소는 데이터를 가져오는 방법을 알지 못합니다. REST 또는 GraphQL을 사용하세요. Suspense는 가져오기 세부 정보가 구성 요소로 유출되는 것을 방지하기 위해 경계를 설정합니다.
표준 상태
여러 get 작업이 요청되면 Suspense는 최신 get 요청을 사용합니다.
4. 요약
오랫동안 수명주기 방법은 데이터를 얻는 방법에 대한 유일한 솔루션이었습니다. 그러나 데이터를 얻기 위해 이를 사용하면 많은 상용구 코드, 중복 및 재사용성 문제가 발생합니다.
관련 무료 학습 권장 사항: JavaScript(동영상)
위 내용은 반응 데이터를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
