React에서 데이터를 얻는 방법과 그 장점과 단점에 대한 간략한 토론-JS 튜토리얼-php.cn

React에서 데이터를 얻는 방법과 그 장점과 단점에 대한 간략한 토론

I/O 작업(예: 데이터 추출)을 수행할 때 먼저 네트워크 요청을 보낸 다음 응답을 기다린 다음 응답 데이터를 구성 요소의 상태에 저장하고 마지막으로 렌더링합니다.

React에서는lifecycle 메서드,Hooks및Suspense가 데이터를 가져오는 방법입니다. 다음으로, 비동기 작업 코드를 더 잘 작성할 수 있도록 예제를 사용하여 사용 방법을 보여주고 각 방법의 장점과 단점을 설명하겠습니다.

1. 라이프 사이클 방법을 사용하여 데이터 요청

Employees.org애플리케이션은 두 가지 작업을 수행합니다.Employees.org做两件事：

1.一进入程序就获取20名员工。
2.可以通过过滤条件来筛选员工。

React에서 데이터를 얻는 방법과 그 장점과 단점에 대한 간략한 토론

在实现这两个需求之前，先来回顾一下React 类组件的2个生命周期方法:

componentDidMount()：组件挂载后执行
componentDidUpdate(prevProps):当props或state改变时执行

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

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 获取员工数据中...
; } return ; } }

로그인 후 복사

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

有一个获取数据的异步方法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发生变化时重新渲染。

如下示例所示，在中使用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 Fetching employees....
; } return ; }

로그인 후 복사

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

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

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

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

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 Fetching employees....
; } return ; }

로그인 후 복사

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

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

1 입력하자마자 20명의 직원을 확보합니다. 프로그램.
2. 조건을 필터링하여 직원을 필터링할 수 있습니다.

이 두 가지 요구 사항을 구현하기 전에 React 클래스 구성 요소의2수명 주기 메서드를 검토해 보겠습니다.

< code>comComponentDidMount( ): 컴포넌트가 마운트된 후 실행
comComponentDidUpdate(prevProps):props또는state 가 실행되는 경우 변경 시

Component는 위의 두 가지 수명 주기 메서드를 사용하여 획득 논리를 구현합니다.
        
         
          Fetch in progress...}>  
          
           로그인 후 복사
          
         
         
          로그인 후 복사
         
        
Opencodesandbox는획득 프로세스를 볼 수 있습니다.에는 데이터를 가져오는 비동기 메서드fetch()가 있습니다. 가져오기 요청이 완료된 후setState메서드를 사용하여직원을 업데이트합니다.
this.fetch()는comComponentDidMount()수명 주기 메서드에서 실행됩니다. 구성 요소가 처음 렌더링될 때 직원 데이터를 가져옵니다.
키워드가 필터링되면props.query가 업데이트됩니다.props.query가 업데이트될 때마다comComponentDidUpdate()는this.fetch()를 다시 실행합니다.
라이프사이클 메소드는 상대적으로 익히기가 쉽지만, 클래스 기반 메소드에 존재하는 상용구 코드는 재사용을 어렵게 만듭니다.
Advantages이 메서드는 이해하기 쉽습니다.comComponentDidMount()는 첫 번째 렌더링에서 데이터를 가져오고,comComponentDidUpdate()는props가 업데이트될 때 데이터를 다시 가져옵니다.단점보일러플레이트 코드클래스 기반 구성 요소는React.Component를 상속하고 생성자 등에서super(props)를 실행해야 합니다. thisthis키워드를 사용하는 것은 번거롭습니다. 코드 중복comComponentDidMount()와comComponentDidUpdate()의 코드는 대부분 반복됩니다. 재사용이 어렵습니다직원 확보 로직은 다른 구성요소에서 재사용하기 어렵습니다.2. Hooks를 사용하여 데이터 획득Hooks는 클래스 기반 데이터 획득에 더 나은 선택입니다. 간단한 기능인 Hooks는 클래스 구성 요소처럼 상속될 필요가 없으며 재사용하기가 더 쉽습니다.useEffect(callback[, deps])후크를 간략하게 기억해 보세요. 이 후크는 마운트 후콜백을 실행하고 종속성deps가 변경되면 다시 렌더링합니다. 다음 예와 같이에서useEffect()를 사용하여 직원 데이터를 가져옵니다.
         
          
           import React, { Suspense } from "react"; import EmployeesList from "./EmployeesList"; function EmployeesPage({ resource }) { return ( Fetching employees....
}>   ); } function EmployeesFetch({ resource }) { const employees = resource.employees.read(); return ; }
           
            로그인 후 복사