Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how to obtain data in React". In the operation of actual cases, many people will encounter such a dilemma. Then let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When performing an Icano operation (such as data extraction), you first send a network request, then wait for the response, then save the response data to the state of the component, and finally render.

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

1. Request data using the lifecycle method

The application Employees.org does two things:

1. Get 20 employees as soon as you enter the program.

two。 You can filter employees by filtering criteria.

1.gif

Before implementing these two requirements, let's review the two lifecycle approaches of React class components:

ComponentDidMount (): execute after the component is mounted

ComponentDidUpdate (prevProps): executes when props or state changes

The component implements the acquisition logic using the above two lifecycle methods:

ImportEmployeesListfrom ". / EmployeesList"

Import {fetchEmployees} from ". / fake-fetch"

ClassEmployeesPageextendsComponent {

Constructor (props) {

Super (props)

This.state= {employees: [], isFetching:true}

}

ComponentDidMount () {

This.fetch ()

}

ComponentDidUpdate (prevProps) {

If (Props.queryProps.Query) {

This.fetch ()

}

}

Asyncfetch () {

This.setState ({isFetching:true})

Constemployees=awaitfetchEmployees (this.props.query)

This.setState ({employees,isFetching:false})

}

Render () {

Const {isFetching,employees} = this.state

If (isFetching) {

Return acquires employee data.

}

Return

}

}

Open codesandbox to view the acquisition process.

There is an asynchronous method fetch () that gets the data. After the fetch request is complete, use the setState method to update the employees.

This.fetch () is executed in the componentDidMount () lifecycle method: it gets employee data when the component is initially rendered.

When we filter the keyword, props.query will be updated. Whenever props.query is updated, componentDidUpdate () re-executes this.fetch ().

Although the lifecycle approach is relatively easy to master, class-based methods have boilerplate code that makes reusability difficult.

Advantages

This approach is easy to understand: componentDidMount () takes the data the first time it renders, while componentDidUpdate () retrieves the data when the props is updated.

Shortcoming

Template code

Class-based components need to inherit React.Component, execute super (props) in the constructor, and so on.

This

Using the this keyword is troublesome.

Code repetition

Most of the code in componentDidMount () and componentDidUpdate () is duplicated.

It is difficult to reuse

Employee acquisition logic is difficult to reuse in another component.

two。 Use Hooks to get data

Hooks is a better way to get data based on classes. As a simple function, Hooks does not inherit like class components and is easier to reuse.

Briefly recall useEffect (callback [, deps]) Hook. The hook executes callback after mounting and renders again when the dependency deps changes.

"as shown in the following example, use useEffect () in to get employee data:"

ImportEmployeesListfrom ". / EmployeesList"

Import {fetchEmployees} from ". / fake-fetch"

FunctionEmployeesPage ({query}) {

Const [isFetching,setFetching] = useState (false)

Const [employees,setEmployees] = useState ([])

UseEffect (functionfetch () {

(asyncfunction () {

SetFetching (true)

SetEmployees (awaitfetchEmployees (query))

SetFetching (false)

) ()

}, [query])

If (isFetching) {

ReturnFetchingemployees....

}

Return

}

Open codesandbox to see how useEffect () gets the data.

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

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

.

But there is still room for optimization. Hooks allows us to extract employee acquisition logic from the component and take a look at:

ImportReact, {useState} from'react'

ImportEmployeesListfrom ". / EmployeesList"

Import {fetchEmployees} from ". / fake-fetch"

FunctionuseEmployeesFetch (query) {/ / this line has changed

Const [isFetching,setFetching] = useState (false)

Const [employees,setEmployees] = useState ([])

UseEffect (functionfetch {

(asyncfunction () {

SetFetching (true)

SetEmployees (awaitfetchEmployees (query))

SetFetching (false)

) ()

}, [query])

Return [isFetching,employees]

}

FunctionEmployeesPage ({query}) {

Const [employees,isFetching] = useEmployeesFetch (query); / / this line has changed

If (isFetching) {

ReturnFetchingemployees....

}

Return

}

Mention the required value from useEmployeesFetch (). The component has no corresponding acquisition logic and is only responsible for the rendering interface.

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

Advantages

Clear and simple

Hooks does not have boilerplate code because they are ordinary functions.

Reusability

The logic of fetching data implemented in Hooks is easy to reuse.

Shortcoming

Pre-knowledge is required

Hooks is a bit counterintuitive, so you have to understand them before you use them, and Hooks relies on closures, so be sure to understand them well.

imperative

With Hooks, you still have to use an imperative method to perform data acquisition.

3. Use suspense to get data

Suspense provides a declarative way to get data from React asynchronously.

Note: as of November 2019, Suspense is in the experimental stage.

Wraps the components that perform asynchronous operations:

When the data is obtained, the Suspense will display the contents of the fallback, and when the data is obtained, the Suspense will render using the acquired data.

Take a look at how to use Suspense:

ImportReact, {Suspense} from "react"

ImportEmployeesListfrom ". / EmployeesList"

FunctionEmployeesPage ({resource}) {

Return (

)

}

FunctionEmployeesFetch ({resource}) {

Constemployees=resource.employees.read ()

Return

}

Open codesandbox to see how Suspense gets the data.

Use the Suspense processing component to pass the obtained data to the component.

Resource.employees in is a specially wrapped promise that communicates with Suspense behind its back. In this way, Suspense knows how long it will take for a "pending" rendering, and when the resources are ready, it starts to perform the rendering work.

The biggest advantage is that Suspense handles asynchronous operations in a declarative and synchronous manner. The component does not have complex data acquisition logic, but instead uses resources to render content declaratively. There is no lifecycle inside the component, no Hooks,async/await, no callback: only the interface is displayed.

Advantages

Declarative type

Suspense performs asynchronous operations in React declaratively.

simple

Declarative code is easy to use, and these components do not have complex data acquisition logic.

Loose coupling and acquisition implementation

Components that use Suspense don't see how to get the data: use REST or GraphQL. Suspense sets a boundary to protect the acquisition details from leaking to the component.

Standard state

If more than one fetch operation is requested, Suspense uses the latest fetch request.

This is the end of "how to get data in React". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.