RN从0到1系统精讲与小红书APP实战2023版-对酒当歌，人生几何！

原生JavaScript完成的SPA单页应用（hash路由）

什么叫做SPA单页应用

RN从0到1系统精讲与小红书APP实战2023版

download：https://www.zxit666.com/5906/

单页Web应用 （single page web application，SPA） ，就是只要一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

单页应用的说法是在JavaScript和AJAX技术比拟成熟以后才呈现的，指的是经过阅读器访问一个网站时，只需求加载一个入口页面，尔后显现的内容和数据都不会再刷新阅读器页面。有了单页应用之后，传统的网站就被称为多页应用了。

单页应用的优点

• 1. 前端担任界面显现，后端担任数据存储和计算，各司其职。

• 2. 用户体验好、快，内容的改动不需求重新加载，提升了用户体验；而且同一套后端程序代码，不用修正就能够用于Web界面、手机、平板等多种客户端；

• 3. 减轻效劳器压力，效劳器只用出数据就能够，不用管展现逻辑和页面合成，吞吐才能会进步几倍。

单页应用的完成原理

其实很容易了解，就是在一个HTML页面当中只要一个div节点，经过后端获取到数据，然后js操作DOM来创立、删除、更新节点以到达修正页面内容，所以页面是没有被刷新的，只是DOM节点发作了改动，所以HTML发作了改动。

目前有十分多开发单页应用的优秀框架，常见的有Vue、React、Svelte、Angular，但是这些框架都需求依赖十分笨重的Node模块、打包工具、开发环境、以及各种组件。有没有一种传统的开发方式去完成单页应用呢？本文正是处理计划！

代码阐明

本次示例也是采用了目前的Web构建工具打包出来的目录形式（即Webpack、Vite等打包工具）

index.js里面的数据写在了一个对象当中，实践应用需求运用AJAX/Fetch等方式获取数据返回JSON对象停止显现。

动图演示

在这个动图示例中，能够看到，切换tab的时分，下面的列表发作了变化，URL也发作了变化，但是并没有刷新页面。