gzyueqian
13352868059

Web前端培训:为什么React存在?

更新时间: 2022-05-17 09:42:01来源: 粤嵌教育浏览量:7901

  当你开始建立一个新网站,你要做的第一件事是运行create-react-app my-website,但是你有没有停下来考虑一下为什么你甚至首先使用React?仅仅是钩子还是你可以轻松创建组件并在页面中使用它们?想要对React有更深入的了解和认识,可以参加Web前端培训,通过概念讲解加实战项目演练的方式,帮你快速掌握这个前端框架。

  为什么会有这个工具? 本文将解释 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 文件,该文件处理不同页面的客户端呈现实现。因此,当你导航到新页面时,该页面不会重新加载。所以如果你想学习React,不妨报名参加Web前端培训,学习React 对技能提升和职业发展都有很大的帮助。

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

  前端 Web 开发极具挑战性

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

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

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

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

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

  使用JavaScript,这些方法中的任何一种在技术上都是有效的,但是,随着人们不断构建,抽象上的抽象被创建以使代码更具声明性。你拥有 lodash、jQuery、日期格式库等库。对React感兴趣的同学,可以参加Web前端培训,你可以学到更全面的知识和技能,提高前端开发工作效率。

  



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

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

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

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

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

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

  随着对更灵活、声明性、易于维护和更易于控制的组件和用户界面组合方式的需求不断增长,Facebook创建了名为FaxJS的原型是由Facebook的软件工程师 Jordan Walker创建的。React是前端常用的一个框架,想要学会这个框架的使用技能,建议报名参加Web前端培训,可以在短时间内获得较大提升。

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

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

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

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

  结论

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

  许多开发人员最初选择React是因为它使启动网站变得非常容易,但正如我们所了解的,它所做的远不止这些。参加web前端培训,有好的教学环境、系统规范的课程、主流软件,不光可以扩展你的技术,同时紧贴就业市场需求设计。让你学到的技能贴合就业市场,不怕面对就业竞争对手。


免费预约试听课