How to get data in react

Methods to obtain data in react: 1. Use life cycle methods to request data; 2. Use Hooks to obtain data; 3. Use suspend to obtain data.

The operating environment of this tutorial: windows10 system, react16, this article is applicable to all brands of computers.

Methods to get data in react:

1. Use life cycle methods to request data

Application Employees.org Do 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 two life cycle methods of react class components:

• componentDidMount(): Executed after the component is mounted

• componentDidUpdate(prevProps): Executed when props or state changes

Component34814c318ecaee88690203cd1e1e3118Use 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 <div>获取员工数据中...</div>;
    }
    return <EmployeesList employees={employees} />;
  }
}

Open codesandbox to view the e6434c86b85e81f3111e15b50dacf7fc acquisition process.

e6434c86b85e81f3111e15b50dacf7fcThere is an asynchronous method fetch() to obtain data. After the get request is completed, 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 re-execute 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()Gets data on the first render, while componentDidUpdate( )Re-obtain data when props are updated.

Disadvantages

Boiler code

Class-based components need to inherit React.Component and 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 are 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 the callback after mounting and re-renders when dependency deps change.

As shown in the following example, use useEffect() in e6434c86b85e81f3111e15b50dacf7fc 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 <div>Fetching employees....</div>;
  }
  return <EmployeesList employees={employees} />;
}

Open

codesandbox to see how useEffect() obtains data.

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

In

useEffect(fetch, [query]) in the e6434c86b85e81f3111e15b50dacf7fc function component, the fetch callback is executed after the initial rendering. In addition, the fetch method will also be re-executed when the dependency query is updated.

But there is still room for optimization. Hooks allow us to extract employee acquisition logic from the e6434c86b85e81f3111e15b50dacf7fc component, let’s take a look:

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

Mention the required value from

useEmployeesFetch(). The component e6434c86b85e81f3111e15b50dacf7fc has no corresponding acquisition logic and is only responsible for rendering the interface.

Even better, useEmployeesFetch() can be reused in any other component that needs to get employees.

Advantages

• Clear and simple, Hooks have no boilerplate code because they are ordinary functions.

• Reusability, the data acquisition logic implemented in Hooks is easy to reuse.

Disadvantages

Requires prior knowledge

Hooks are a bit counterintuitive, so you must understand them before using them, Hooks dependencies closures, so be sure to understand them well.

Necessity

Using Hooks, you still have to use an imperative approach to perform data retrieval.

Foshan vi design https://www.houdianzi.com/fsvi/ Pea resource search directory https://55wd.com

3. Use suspense to obtain data

Suspense provides a declarative way to asynchronously obtain data in React.

Note: As of November 2019, Suspense is in an experimental phase.

bb06e69d307cb52103d07d8f9dd385e5Package components that perform asynchronous operations:

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

When data is obtained, Suspense will display the content in the fallback. After obtaining the data, Suspense will Use the obtained data to render

790d49bba4c59bf74dba70d8d1e86ab7.

Let’s see how to use 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} />;
}

Open codesandbox to see how Suspense obtains data.

e6434c86b85e81f3111e15b50dacf7fcUse the Suspense processing component to pass the obtained data to the 5016a9874c4310a75bdaf0ae7b380374 component.

resource.employees in 5016a9874c4310a75bdaf0ae7b380374 is a specially wrapped promise that communicates with Suspense behind the scenes. This way, Suspense knows how long it will take to "suspend" the rendering of 5016a9874c4310a75bdaf0ae7b380374, and can begin rendering work when the resource is ready.

The biggest advantage is: Suspense handles asynchronous operations in a declarative and synchronous manner. Components do not have complex data retrieval logic, but use resources in a declarative manner to render content. There is no life cycle inside the component, no Hooks, async/await, no callbacks: only the display interface.

Advantages

Declarative

Suspense performs asynchronous operations in React in a declarative way.

Simple

Declarative code is simple to use and these components have no complex data retrieval logic.

Loose Coupling and Fetching Implementation

Components using Suspense don’t see how to get data: use REST or GraphQL. Suspense sets a boundary to protect fetch details from leaking into the component.

Standard status

If multiple get operations are requested, Suspense will use the latest get request.

4. Summary

For a long time, lifecycle methods have been the only solution for how to get data. However, using them to obtain data comes with a lot of boilerplate code, duplication, and reusability issues.

Related free learning recommendations: JavaScript (video)

The above is the detailed content of How to get data in react. For more information, please follow other related articles on the PHP Chinese website!