首頁  >  文章  >  web前端  >  react單頁面和多頁面的差別是什麼

react單頁面和多頁面的差別是什麼

WBOY
WBOY原創
2022-04-18 10:56:492396瀏覽

區別:1、多頁面應用不同的URL返回不同的HTML,而單頁應用不同URL返回同一個HTML;2、多頁面應用即使兩個頁面存在公共資源,這些公共資源會被清空重新下載,而這些單一頁面應用程式的公共資源不會重複下載。

react單頁面和多頁面的差別是什麼

本教學操作環境:Windows10系統、react17.0.1版、Dell G3電腦。

react單頁面和多頁面的區別是什麼

多頁面應用

  • URL用於瀏覽器向伺服器請求相應資源。不同URL回傳不同HTML。

  • 瀏覽器清空A頁面,依照剛回傳的HTML內容下載對應js/css資源渲染B頁面。

  • 即使A與B頁面存在公共資源(導覽列等),這些公共資源也會被清空,重新下載。

  • 來實現頁面跳轉

單一頁面應用程式

  • URL用於瀏覽器向伺服器請求對應資源,但不同URL傳回同一個HTML(shell HTML),但該HTML內容有更新

  • 瀏覽器不會清空A頁面,只是下載B頁面所需的js/css資源(程式碼分片)

  • 如果A與B頁面存在公共資源(導覽列等),這些公共資源不會重複下載。

  • 刷新網頁,訪問http://localhost:3000,在瀏覽器的網路工具中可以看到下載了三個文件,分別是common.bundle.、bundle.和home.chunk.js,其中home.chunk.j就是特定於Home的分片文件,當我們透過點擊頂欄的About連結時,可以看到只有一個新下載的文件about.chunk扣

  • 實現頁面更新

react單頁面和多頁面的差別是什麼

#推薦學習:《react影片教學

以上是react單頁面和多頁面的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn