How react interacts with the server

Time:2022-5-16

In a react application, the problem of how to interact with the server through Ajax has bothered me for some time. After learning and practice, I have some experience. I’ll write it out and share it with you.

Generally speaking, there are four ways I know about react Ajax interaction:

  • Root Component

  • Container Component

  • Redux/Flux Async Actions

  • Relay

Root Component

How react interacts with the server

This is the most direct way, which is very suitable for prototype and small application development.

Implementation scheme

The implementation is also very simple. There is a root component at the top level of the whole application. All Ajax requests are in this componentcomponentDidMountAnd save the returned results as their own state. At the same time, pass data to the lower layer components through props.

Insufficient

If the application is large and the components are deeply nested, the data must be transmitted all the way through props… (of course, it can also be transmitted through context, but context is not suitable for transmitting data)

Usage scenario

  • The application is relatively simple and the component tree is not deep

  • Or red flux doesn’t work

Container Component

How react interacts with the server

This scheme is very similar to the root component, except that multiple containers and servers can interact at the same time.

Implementation scheme

First, we should distinguish components into container and presentation.

Like the root component, the container component performs Ajax interaction with the server and passes the obtained data down to the presentation component through props.

Usage scenario

  • The component tree is deep

  • You need to get data from different servers or APIs

  • Or red flux doesn’t work

Redux/Flux Async Actions

How react interacts with the server

If you are already using Redux / flux, it is natural to manage data through them.

Implementation scheme

In terms of implementation, the official documents of Redux have a goodExamples

Simply put, it means that Ajax requests are not initiated in the component at all, and these operations are carried out in async actions.

Usage scenario

  • Use Redux or flux

Relay

How react interacts with the server

Relay is completely another world, which is essentially different from the previous three.

Relay is applicable to large-scale applications (such as Facebook). A graphql server must be provided at the same time when using relay.

Implementation scheme

First, you have to have a graphql server, and then you have to use graphql (not proptypes) to define the data required by the component. Just leave the rest to relay, who will be responsible for automatically downloading the required data and filling it into the props of the component.

Insufficient

  • Relay is designed to run with graphql server and cannot interact well with third-party JSON services.

  • At present, it seems that relay can only connect to one graphql server.

Usage scenario

  • Super large application

  • The JSON API is not intended to be used

Recommended Today

How can serverless achieve large-scale landing in Alibaba?

Author Zhao Qingjie (Lu Ling)Source|Alibaba cloud native official account 1、 Achievements of large-scale implementation of serverless group In 2020, we made a very big upgrade on the underlying infrastructure of serverless. For example, the computing was upgraded to the fourth generation Shenlong architecture, the storage was upgraded to Pangu 2.0, and the network entered the […]