在前端开发中，我们常常需要选择使用多页面应用程序（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。
npm install --save react-router-dom
创建不同的页面
我们按照如下方式创建不同的页面：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------- -------- ---------- - ------ -------- ---------- - ------ -------- ----------- - ------ --------- ---------- - ------ -------- ------------- - ------ ----------- ---------- -展开代码
注意第一个页面是导出默认的组件，而其他页面则是导出具名组件。
创建路由
我们使用 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 项目：
npx create-react-app my-spa
然后在 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
