[Day24] React - 浅谈SPA（single-page applications）

在开始React之旅前，必须先了解一下什麽是SPA。
相较於过去使用的多页式(MPA)网页开发，大多是一个一个页面切换，点选一个按钮，重新载入另外一个页面。现今前端框架React、vue、Angular都是用SPA（single-page applications），也就是所谓的单页面应用程序。

单页面应用程序说白话一点就是把所有资料都放在同一个页面，所以SPA不需要换页，使用者可以在单一页面里浏览全部内容，也就是说只会一个index.html 档。

当我们访问SPA时，浏览器会下载整个应用程序的资料；当浏览应用程序的不同部分时页面不会重新载入。

这是因为SPA在浏览器而不是在服务器上执行逻辑。它使用JavaScript框架来实现这一点，JavaScript框架可以在客户端处理大量资料。JavaScript还允许SPA只重新载入使用者请求的部分，而不是整个应用程序。因此，SPA以提供快速高效的效能而闻名。

可能有人会疑惑，要在单一页面浏览所有内容，那要怎麽做页面的切换?
解决办法就是在网址後面加个#，後面接要切换到的页面，来辨别现在的位置。(即是 react-router 的 hashRouter)
假如: 我们网址是 https://myexample.com/index.html，若切换到购物车页面，网址会变成是https://myexample.com/index.html#shoppingcart

以实际的例子最能够理解，最经典的SPA例子就是 Gmail。
当我们在用 Gmail 的时候，完全没有换页。全部的动作都是在「同一个页面」上面发生的，所以你载入的档案从头到尾就只有一个 index.html，完全没有换过。

当我们在 Gmail 上面做的任何动作，都是用 ajax 发 request 给 server，server 回传资料以後 client 端再用 JavaScript 把画面 render 出来。

所以在使用 Gmail 时，会感觉好像在用一个 App 而不是在用网页，因为页面之间的跳转很流畅，不像一般网页中间可能会有白屏出现，有更好的使用体验。

以上即是今天针对SPA的整理，谢谢

参考来源: https://www.gushiciku.cn/pl/pGDD/zh-tw