Web前端：为什么React存在?

当你开始建立一个新网站，你要做的第一件事是运行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完成的，其中大部分是在激活新页面时借助 DOM 操作(修改、添加和删除屏幕上的元素)完成的。

使用 SPA，网站通常只访问服务器一次以获取 index.html 文件。该文件引用了一个 JavaScript 文件，该文件处理不同页面的客户端呈现实现。因此，当你导航到新页面时，该页面不会重新加载。

地址栏中的 URL 更新，浏览器中的路由状态更新，JavaScript 在需要的地方更新文档。对于像页眉和页脚这样的地方，通常在所有页面上都是相同的，这些地方不会重新渲染，只会呈现具有新更改的正文内容。

前端 Web 开发极具挑战性

SPA 的进步为前端开发带来了更高级的挑战，开发人员现在必须处理事件、动态加载数据、手动管理导航等等。前端已经不是以前的样子了，使用JavaScript操作DOM是一项繁重的工作，需要抽象。

声明式代码可以更可预测且更易于调试

有两种编程范式，即命令式编程和声明式编程。

在命令式编程中，你告诉计算机它需要采取的确切步骤才能达到你想要的结果。声明式编程涉及告诉计算机你想要的结果并让它处理这些步骤。

声明式代码主要是提高代码可读性的抽象，此外，它们使代码可预测。for 循环可以做很多事情，但是使用过滤器抽象，你希望仅通过命名约定来获得过滤结果。当代码更容易阅读和预测时，当出现问题时更容易调试。

使用JavaScript，这些方法中的任何一种在技术上都是有效的，但是，随着人们不断构建，抽象上的抽象被创建以使代码更具声明性。你拥有 lodash、jQuery、日期格式库等库。

带有可重用组件的声明式代码

构建网站的旧方法涉及在网站的所有页面上重复通用组件(如页眉和页脚)。这些组件通常具有相同的类名，都连接到一个样式表以在每个页面上显示相同。但是这种方法使得更新这些通用组件变得很困难。对主页上标题部分的任何添加都需要对使用标题的每个.html 文件进行类似的更新。这种方法还使测试特定组件变得更加困难，因为你必须在每个页面上测试它，而不是只在一个地方进行测试。

今天的Web应用程序是基于组件的，从某种意义上说，它们是使用独立组件的组合构建的。在React等框架的帮助下，这种构建方法变得更加容易。

你已经单独构建了页眉、页脚和明信片组件并进行了相应的测试。然后，在创建主页时，你将导入页眉和页脚组件(如变量)并使用这些组件构建你的页面。

现在，你无需在所有页面中编写相同的标头实现，而是将其仅放在一个地方并在所有页面之间共享。对标题应用样式更改，更改会反映在整个应用程序中。

React 来自哪里，谁编写和维护它

随着对更灵活、声明性、易于维护和更易于控制的组件和用户界面组合方式的需求不断增长，Facebook创建了名为FaxJS的原型是由Facebook的软件工程师 Jordan Walker创建的。

今天有很多人编写 React，从个人开发人员到 Gatsby 和 Next.js 等框架。React 在整个技术生态系统中都被使用。作为一个开源库，React 吸引了许多贡献者，他们添加了功能、修复了错误，并帮助维护和管理版本更新。

为什么它在当前的就业市场中受欢迎且有价值

由于受到 Facebook 的支持，React 是一个理想的框架。选择一个框架对企业来说是一项长期投资，他们希望为他们选择的工具提供可靠的长期支持。React 还具有高性能、可扩展、灵活且易于维护的特点。

对于开发人员来说，React 是一个有吸引力的选择，原因有很多：它易于上手，React 背后的社区很友好，并且已经为它构建了许多工具，你有用于钩子、状态管理和许多其他东西的库!

结论

React是一个强大的抽象，它允许我们编写可重用的声明性组件。而在此之前，我们正在编写静态HTML页面，花费大量时间使用命令式JavaScript代码操作浏览器，或者在多个文件中编写相同的重复组件。

许多开发人员最初选择React是因为它使启动网站变得非常容易，但正如我们所了解的，它所做的远不止这些。