Where to place react http requests

React http requests should be placed in componentDidMount for operation, which is for asynchronous requests; for synchronous state changes, react network requests can be placed in componentWillMount, which is generally used less often.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

Where to place the react http request? In which life cycle should React network requests be placed?

In general, for asynchronous requests, it is best to operate them in componentDidMount. For synchronous state changes, they can be placed in componentWillMount, which is generally used less.

If you think that initiating a request in componentWillMount can get the result early, this idea is actually wrong. Usually componentWillMount is not many microseconds earlier than componentDidMount. Any delay on the network, this difference is negligible.

Look at the life cycle of react:

constructor() ----> componentWillMount() ----> render() ----> componentDidMount()

The above methods are called in order, from top to bottom.

The constructor is called at the very beginning when the component is ready to be mounted. At this time, the component has not yet been mounted on the web page.

The componentWillMount method is called after the constructor and before render. The code in this method calling the setState method will not trigger re-render, so it is generally not used for loading data.

The code in the componentDidMount method will only be called and executed after the component has been completely mounted on the web page, so the loading of data can be guaranteed. In addition, calling the setState method in this method will trigger re-rendering. Therefore, this method is officially designed to load external data or handle other side-effect codes. Loading that has nothing to do with the data on the component can also be done in the constructor, but the constructor is responsible for initializing the component state, not loading data. SetState cannot be set in the constructor, and the loading time is too long or If an error occurs, the page cannot be loaded. Therefore, code with side effects will be concentrated in the componentDidMount method.

Summary:

1. It is related to server-side rendering (isomorphism). If data is obtained in componentWillMount, fetch data will be executed twice, once on the server end once on the client side. This problem can be solved in componentDidMount. componentWillMount will also render twice.

2. When fetching data in componentWillMount, the data must arrive after rendering. If you forget to set the initial state, the user experience will be poor.

3. After react16.0, componentWillMount may be executed multiple times.

Recommended learning: "react video tutorial"

The above is the detailed content of Where to place react http requests. For more information, please follow other related articles on the PHP Chinese website!