javascript|Web前端：为什么React存在? 浏览器|spa|编程

文章图片

当你开始建立一个新网站，你要做的第一件事是运行create-react-app my-website ，但是你有没有停下来考虑一下为什么你甚至首先使用React?仅仅是钩子还是你可以轻松创建组件并在页面中使用它们?

为什么会有这个工具? 本文将解释 React 存在的原因以及它如何成为一种快速创建网站的首选工具。
React是JavaScript的一个框架， JavaScript 在Web开发环境中发挥着重要作用。 HTML和CSS分别是标记和样式表文档，它们将元素组合在一起并设置样式以在网页上美观地显示，但这就是他们所能做的，你不能触发任何动态内容，这就是JavaScript的用武之地。
Web浏览器中的JavaScript引擎还连接JavaScript和使用HTML和CSS构建的 Web文档，在浏览器允许JavaScript执行的许多其他功能中，浏览器还允许 JavaScript 访问文档对象模型 (DOM) 。 DOM是一个树对象，它包含Web文档中的所有元素。访问此树使JavaScript可以删除、修改和添加元素到文档。
我们过去是怎么做的?现在怎么不一样了?
例如，我们有一个包含三个页面的网站：Home、About 和Contact 。这是一个在没有JavaScript功能的情况下如何创建此网站的示例：
index.html用于主页页面
about.html用于关于页面
contact.html用于联系页面
styles.css用于样式表，其中包含应用程序的样式声明
对于这样的网站，导航到mywebsite.com需要浏览器从服务器请求路径 /index.html 。根据网络速度或所有页面必要资源的可用性，来自服务器的响应可能会延迟。在Web前端培训中，你可以全面学习到React相关技术，了解其设计模式和最佳实践，最终掌握使用React 开发大型项目的能力。
如果用户点击主页上的about链接，浏览器将不得不再次获取HTML文件并将资源加载到页面，联系页面也是如此。任何新导航总是会重新加载站点，即使第1页和第2页之间的差异可能是单个字符或图像。
引入了单页应用程序 (SPA) 来解决这个问题和其他缺点，今天的网站速度更快，并且有了SPA ，调试网站也变得更加容易。

单页应用(SPA)的兴起
多页应用程序 (MPA) - 构建应用程序的传统方式 - 需要在每次导航时刷新页面，即使前一页和当前页面包含的差异很小。
SPA的概念涉及动态组合元素并在客户端(即浏览器)上为你导航到的任何页面呈现页面，这与MPA不同，后者从服务器呈现页面并且只为该页面提供资源。
【javascript|Web前端：为什么React存在?】客户端渲染是使用JavaScript完成的，其中大部分是在激活新页面时借助 DOM 操作(修改、添加和删除屏幕上的元素)完成的。
使用 SPA ，网站通常只访问服务器一次以获取 index.html 文件。该文件引用了一个 JavaScript 文件，该文件处理不同页面的客户端呈现实现。因此，当你导航到新页面时，该页面不会重新加载。
地址栏中的 URL 更新，浏览器中的路由状态更新， JavaScript 在需要的地方更新文档。对于像页眉和页脚这样的地方，通常在所有页面上都是相同的，这些地方不会重新渲染，只会呈现具有新更改的正文内容。
前端 Web 开发极具挑战性
SPA 的进步为前端开发带来了更高级的挑战，开发人员现在必须处理事件、动态加载数据、手动管理导航等等。前端已经不是以前的样子了，使用JavaScript操作DOM是一项繁重的工作，需要抽象。
声明式代码可以更可预测且更易于调试