大家好,我是 React Js 的新手,我经常听到和看到有关 React 是单页应用程序的帖子,但从未理解什么是 SPA,许多人说它不会重新加载页面,但我不明白为什么,所以请你们解释一下我举个简单的例子。
为什么 React Js 被称为单页应用程序
一个单页应用程序是一个Web应用程序或网站上通过动态重写从web服务器的新数据将当前网页的网页浏览器,而不是浏览器加载整个新页面的默认方法相互作用。
这意味着您网站的 URL 不会完全改变(页面不会重新加载),而是会不断获取内容并用它重写 DOM,而不是加载新页面。
The goal is faster transitions that make the website feel more like a native app
示例:Netflix
这是仪表板,当我们单击任何电影时,它会更改为 /watch 并重写内容。
在技术术语中:
在构建你的 react-app 时,你可以看到只有一个 App.js,你的整个 web 应用程序从片段和组件中加载。这种在单个页面上呈现组件和页面并更改 DOM 的行为(是单个页面行为,因此得名),而不是加载具有新内容的新页面,这让它感觉像是单个应用程序。
正如react术语词汇表中提到的:
一个单页的应用程序是应用程序所需的负载一个HTML页面和所有必要的资产(如JavaScript和CSS等)来运行的应用程序。与页面或后续页面的任何交互都不需要往返服务器,这意味着页面不会重新加载。
关于“为什么 React Js 被称为单页应用程序”:
尽管您可以在 React 中构建单页应用程序,但这不是必需的。React 还可用于通过额外的交互性增强现有网站的一小部分。用 React 编写的代码可以与由 PHP 等在服务器上呈现的标记或其他客户端库和平共处。事实上,这正是 Facebook 使用 React 的方式。
ReactJS 是一个用于构建 UI 并用于 SPA 的开源 JS 库,它管理 Web 应用程序的视图。Reactjs 可以帮助您在不重新加载页面的情况下修改数据。由于其可扩展性和快速性能,它是市场趋势中的流行库。
单页应用程序不同于我们随处可见的多页应用程序,因为 SPA 不会移动到新页面;相反,它将在同一页面内内联加载页面。
单页应用程序只有一个页面,例如www.google.ch
. 它只是加载到浏览器中的一个 HTML 文件(及其所有必需的依赖项)。您只能使用哈希路由器在段落之间导航,但永远不会访问另一个页面www.google.ch/maps
(然后是www.google.ch/#maps
,其中引用/
-> index.html
)(谷歌可能不是最好的例子,它更多的是关于 URI)。