Home  >  Article  >  Web Front-end  >  What is the difference between react single page and multiple pages?

What is the difference between react single page and multiple pages?

WBOY
WBOYOriginal
2022-04-18 10:56:492395browse

Difference: 1. Different URLs in multi-page applications return different HTML, while different URLs in single-page applications return the same HTML; 2. Even if there are public resources in two pages in multi-page applications, these public resources will be Clear and re-download, and these public resources of single-page applications will not be downloaded repeatedly.

What is the difference between react single page and multiple pages?

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

What is the difference between single page and multi-page react Request the appropriate resources. Different URLs return different HTML.

The browser clears page A, downloads the corresponding js/css resources and renders page B based on the HTML content just returned.

  • Even if there are public resources (navigation bar, etc.) on pages A and B, these public resources will be cleared and downloaded again.

  • Use to achieve page jump

  • Single page Application
  • URL is used by the browser to request corresponding resources from the server, but different URLs return the same HTML (shell HTML), but the HTML content has been updated

The browser does not clear page A, but only downloads the js/css resources required for page B (code fragmentation)

  • If there are common resources between pages A and B (Navigation bar, etc.), these public resources will not be downloaded repeatedly.

  • Refresh the web page and visit http://localhost:3000. In the browser's network tool, you can see that three files have been downloaded, namely common.bundle., bundle. and home.chunk.js, where home.chunk.j is the fragmented file specific to Home. When we click on the About link in the top bar, we can see that there is only one newly downloaded file about.chunk

  • Use to implement page updates

  • ##Recommended learning: "
  • react video tutorial

The above is the detailed content of What is the difference between react single page and multiple pages?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn