Is react a spa?

react is a Spa mode, that is, component nesting. Its main parameter passing methods are: 1. Pass parameters to the component where it is mounted; 2. Pass parameters from parent to child, that is, use props or ref to pass parameters. ; 3. Passing parameters from son to father, that is, the child component changes the state of the parent component by triggering the method of the parent component; 4. Passing parameters from brother, that is, changing the state of the child component by changing the state of the public component; 5. Passing between distant relatives Parameters, that is, passing parameters through redux.

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

Is react a spa?

react is a SPA mode, that is, component nesting. In a single-page application, value transfer between components is essential. The main methods of passing parameters are as follows:

1. Pass parameters to the component where it is mounted

　ReactDOM.rander(<a name="a" age="{16}/">,app)</a> When rendering, directly pass parameters to the mounted component.

2. Parent-child parameter passing

Parent-child parameter passing can be done in two ways: props and ref. ①. Passing parameters in props mode. The parent component changes its own parameters and passes the status to the props through props. subcomponent and displayed in the subcomponent. ② Pass parameters through ref. This method is that after the child component changes its own state through its own method, the parent component changes the parameters by triggering the child component's method.

3. Passing parameters from son to father

The child component changes the state of the parent component by triggering the method of the parent component.

4. Passing parameters from brother to brother

There are two types of sibling parameter passing, one is through state promotion, changing the state of public components and then changing the state of sub-components, the other is through ref passing parameters, changing the original state.

5. Parameter transfer between distant relatives

Using redux to assist in parameter transfer is generally suitable for use when there is a lot of interaction with the project. If there is no interaction, using redux will actually increase the number of projects. Complexity, don't use redux when you don't know whether to use it.

Related introduction:

A single page web application (SPA) is an application with only one Web page. It loads a single HTML page and A web application that dynamically updates the page as the user interacts with the application.

—— "Baidu Encyclopedia"

The concept of SPA has been around for a long time. To put it simply, no matter how many pages your website has, I will organize them into one page for you.

SPA does not refresh the page, but only performs partial updates. That is, except for the first time you open the website, which needs to load the entire page, all subsequent jumps within the site will not reload the page. It performs partial refresh on the current page to achieve the effect of page switching.

Imagine, suppose the website originally needs two pages a and b, but now I only make an index, and then write all the html fragments of the two pages a and b into the index, and when displaying , judge the current url through js. If it is /a, I will only display the html fragment that originally belongs to a; similarly, if it is /b, I will display the html fragment of b.

Recommended learning: "react video tutorial"

The above is the detailed content of Is react a spa?. For more information, please follow other related articles on the PHP Chinese website!