A brief discussion on the methods of obtaining data in React and their advantages and disadvantages

When performing I/O operations (such as data extraction), you must first send a network request, then wait for the response, then save the response data to the component's state, and finally render.

In React,lifecycle methods,Hooks, andSuspenseare methods for obtaining data. Next, we will use examples to demonstrate how to use them and explain the advantages and disadvantages of each method so that we can better write asynchronous operation code.

1. Request data using life cycle methods

ApplicationEmployees.orgDo two things:

1. Get20employees as soon as you enter the program.
2. You can filter employees by filtering conditions.

Before implementing these two requirements, let’s review the2life cycle methods of React class components:

1. componentDidMount(): Executed after the component is mounted
2. componentDidUpdate(prevProps): WhenpropsorstateExecuted when changed

ComponentUse the above two life cycle methods to implement the acquisition logic:

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

OpencodesandboxYou can view theacquisition process.

There is an asynchronous method to get datafetch(). After the get request completes, use thesetStatemethod to updateemployees.

this.fetch()Executed in thecomponentDidMount()life cycle method: it gets the employee data when the component is initially rendered.

When our keywords are filtered,props.querywill be updated. Wheneverprops.queryis updated,componentDidUpdate()will be re-executedthis.fetch().

While lifecycle methods are relatively easy to master, class-based methods have boilerplate code that makes reusability difficult.

Advantages

This method is easy to understand:componentDidMount()Get the data on the first rendering, AndcomponentDidUpdate()re-obtains data whenpropsis updated.

Disadvantages

Boilerplate code

Class-based components require InheritReact.Component, executesuper(props)in the constructor, etc.

this

Using thethiskeyword is troublesome.

Code duplication

componentDidMount()The code incomponentDidUpdate()is mostly repeated.

Difficult to reuse

The employee acquisition logic is difficult to reuse in another component.

2. Use Hooks to obtain data

Hooks is a better choice for obtaining data based on classes. As simple functions, Hooks do not need to be inherited like class components and are easier to reuse.

Briefly recalluseEffect(callback[, deps])Hook. This hook executescallbackafter mounting, and re-renders when dependenciesdepschange.

As shown in the following example, useuseEffect()into obtain employee data:

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

OpencodesandboxYou can viewuseEffect()how to obtain data.

You can see that using Hooksis much simpler than using class components.

InuseEffect(fetch, [query])in thefunction component, execute thefetchcallback after the initial rendering. In addition, thefetchmethod
will also be re-executed when the dependency

is updated.But there is still room for optimization. Hooks allow us to extract employee retrieval logic from the

import React, { useState } from &#39;react&#39;; 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} />; }

Fetch in progress...}>  

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