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, and Suspense are 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

Application Employees.orgDo two things:

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

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

1. componentDidMount(): Executed after the component is mounted
2. componentDidUpdate(prevProps): When props or state Executed 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 the acquisition process.

There is an asynchronous method to get data fetch(). After the get request completes, use the setState method to update employees.

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

When our keywords are filtered, props.query will be updated. Whenever props.query is updated, componentDidUpdate() will be re-executed this.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, And componentDidUpdate() re-obtains data when props is updated.

Disadvantages

Boilerplate code

Class-based components require Inherit React.Component, execute super(props) in the constructor, etc.

this

Using the this keyword is troublesome.

Code duplication

componentDidMount()The code in componentDidUpdate() 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 recall useEffect(callback[, deps]) Hook. This hook executes callback after mounting, and re-renders when dependencies deps change.

As shown in the following example, use useEffect() in to 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 ;
}

Open codesandboxYou can view useEffect()how to obtain data.

You can see that using Hooks is much simpler than using class components.

In useEffect(fetch, [query]) in the function component, execute the fetch callback after the initial rendering. In addition, the fetch method
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 '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 ;
}

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