在前端开发中，我们常常需要选择使用多页面应用程序（MPA）还是单页面应用程序（SPA）来构建我们的应用程序。在许多场景下，React 是我们最喜欢的 JavaScript 框架之一。而在选择构建 MPA 还是 SPA 时，我们需要权衡两者之间的优缺点，并选择最适合我们的场景的方案。
MPA vs. SPA
MPA 强调每个页面都是由服务器返回的不同的 HTML 文档，每个页面之间的代码和样式没有共享，需要每个页面都请求自己的资源文件。这种方式的好处是每个页面都可以被搜索引擎索引，而 SPA 由于所有内容都在一个页面上，不容易被搜索引擎爬取。另外，MPA 每个页面都可以单独缓存，提高页面访问速度，而 SPA 由于所有内容都在一个页面上，无法进行页面缓存。
相比之下，SPA 强调所有的逻辑和数据都在一个页面中，只需要向服务器请求数据，而不需要重新加载整个页面。这种方式的好处是用户体验更加流畅，因为只需要在后台与服务器通信，而不必在前台重新加载整个页面。另外，SPA 还使得构建跨平台应用程序和与移动设备兼容性更容易。
MPA 如何使用 React 构建
为了创建 MPA，我们可以使用 React Router 以及 Webpack 等构建工具。react-router 允许我们将每个页面封装在不同的组件中，并在用户导航时动态加载它们。Webpack 能够让我们打包所有的资源（HTML、CSS 和 JS）为一个不同的文件，每个文件对应一个页面。以下是一个 MPA 的示例。
安装 React Router
我们首先需要通过 npm 安装 React Router。
--- ------- ------ ----------------
创建不同的页面
我们按照如下方式创建不同的页面：
------ ----- ---- -------- ------ ------- -------- ---------- - ------ -------- ---------- - ------ -------- ----------- - ------ --------- ---------- - ------ -------- ------------- - ------ ----------- ---------- -
注意第一个页面是导出默认的组件，而其他页面则是导出具名组件。
创建路由
我们使用 React Router 来创建路由。我们首先需要导入一些组件，然后创建 <BrowserRouter> 包含所有页面的路由。我们使用 <Route> 组件定义每个页面的 URL 和要显示的组件。
------ ----- ---- --------
------ - -------------- ------ ---- - ---- -------------------
------ --------- - ---------- ----------- - ---- ----------
------ ------- -------- ----- -
------ -
---------------
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
----
----- ----------------------------
-----
-----
------
------
------ ----- -------- -------------------- --
------ ------------- --------------------- --
------ --------------- ----------------------- --
-------
----------------
--
-我们创建一个包含三个链接的导航栏，每个链接对应一个页面路由。<Route> 组件中的 exact 属性表示只有在 URL 与路径完全匹配时才会显示该页面。
创建 Webpack 配置
最后我们需要创建 Webpack 配置，生成不同的 HTML 文件。我们定义三个入口文件不同的页面，然后使用 HtmlWebpackPlugin 插件为每个页面生成对应的 HTML 文件。
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -
----- ----------------
------ -----------------
-------- -------------------
--
------- -
--------- -------------------
----- ----------------------- --------
--
-------- -
--- -------------------
--------- -------------------
------- ---------
--------- -------------
---
--- -------------------
--------- -------------------
------- ----------
--------- -------------
---
--- -------------------
--------- -------------------
------- ------------
--------- ---------------
---
--
---------- -
------------ -------------------- --------
--------- -----
----- -----
--
--我们将三个页面路由作为入口文件，并且为每个页面生成对应的 HTML 文件。这时，我们在浏览器中打开 http://localhost:9000/、http://localhost:9000/about.html 和 http://localhost:9000/contact.html 就可以访问到我们的 MPA 了。
SPA 如何使用 React 构建
SPA 的核心是将所有的逻辑和数据都在一个页面上，只需要向服务器请求数据，而不需要重新加载整个页面。React 和其他 JavaScript MVC 框架（例如 Angular、Vue 等）非常适合用于构建 SPA。
创建单页应用
为了使用 React 构建 SPA，我们可以使用 create-react-app 来初始化我们的项目。我们只需要运行以下命令即可创建一个新的 React 项目：
--- ---------------- ------
然后在 src/index.js 文件中，我们使用 ReactDOM.render 来渲染根组件。在这个例子中，我们只有一个根组件 App。
------ ----- ---- --------
------ -------- ---- ------------
------ --------------
------ --- ---- --------
----------------
------------------
---- --
--------------------
-------------------------------
--创建路由
我们使用 React Router 来创建路由。我们首先需要导入一些组件，然后创建 <BrowserRouter> 或 <HashRouter> 包含所有页面的路由。我们使用 <Route> 组件定义每个页面的 URL 和要显示的组件。
------ ----- ---- --------
------ - ------------- -- ------- ------- ----- - ---- -------------------
------ -------- ---- -------------------
------ --------- ---- --------------------
------ ----------- ---- ----------------------
-------- ----- -
------ -
--------
--------
------ ----- -------- -------------------- --
------ ------------- --------------------- --
------ --------------- ----------------------- --
---------
---------
--
-
------ ------- ----我们创建一个包含三个链接的导航栏，每个链接对应一个页面路由。
创建页面组件
我们需要为每个页面创建组件。下面是一个示例：
------ ----- ---- --------
------ ------- -------- ---------- -
------ -
-----
-------- ---------
---------- -- --- ---- ---------
------
--
-我们在这里只是创建了一些文本和标题。你可以根据你的需要为每个组件添加更多的功能和样式。
创建 Webpack 配置
最后我们需要创建 Webpack 配置，使用 HtmlWebpackPlugin 插件为我们的 SPA 自动生成 index.html 文件，同时利用 WebpackDevServer 启动本地服务器。
----- ---- - ----------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -----------
----- -------------------- ---------
----------- ----
--
---------- -
------------ -------------------- ---------
------------------- -----
----- -----
----- -----
--
------- -
------ -
-
----- --------------
---- ---------------
-------- ---------------
--
-
----- ---------
---- ---------------- --------------
--
--
--
-------- -
--- -------------------
--------- ----------------------
--------- -------------
---
--
--现在，我们可以启动本地服务器，然后在浏览器中打开 http://localhost:3000/ 即可访问我们的 SPA。
总结
在选择构建 MPA 还是 SPA 时，我们要根据具体的场景进行权衡。如果我们需要更好的 SEO 表现，以及更快的页面加载速度和缓存性能，那么 MPA 是更好的选择。但是，如果我们需要更好的用户体验、更灵活的路由控制和跨平台的支持，那么 SPA 是更好的选择。
使用 React 为 MPA 或 SPA 创建应用程序，我们可以使用 react-router 来创建路由，并使用 Webpack 打包所有资源文件。无论你选择哪种方式，React 都可以帮助我们轻松地构建优秀的前端应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a55dcaadd4f0e0ffde4733