Web前端开发:React.js与web前端是什么关系？

太过爱你忘了你带给我的痛 2023-10-01 16:52 15阅读 0赞

React已迅速成为制作前端应用程序最流行的方式之一，它彻底改变了web应用程序的开发方式。React不是一个MVC框架；而是一个“只查看”的库。React中的前端开发围绕着React生态系统，而不仅仅是核心元素，最终消除了不必要的复杂性。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_20_color_FFFFFF_t_70_g_se_x_16]

图片

**React生态系统**

从技术上讲，开发人员可以通过附加库扩展核心React库的功能。将React与这些库一起使用形成React生态系统。例如，Redux用于状态管理，React Router用于路由，Axios用于促进API交互。成千上万这样的库是React生态系统的一部分。React不使用模板，相反，它使用组件。

**React使用组件**

React被称为构建UI的最佳库是有原因的。它构建用户界面的方式是独特的，但又是可接近的。React.js 将UI分解为独立的、可重用的部分和独立的组件。这就是如何在ES6中定义组件“Welcome”。

此外，在React中构建应用程序时，你不必写下每个组件。React生态系统中有许多可用的组件库：React Material-UI、React-Bootstrap和React Belle。

所有这些令人敬畏的UI提示可能会让你想，‘难道它们不会因为大量的DOM操作而使最终应用程序的性能停滞不前吗？’这是一个有效的论点。注意：DOM元素构成用户看到的应用程序的一部分。

**虚拟DOM**

无论客户端平台和JavaScript引擎有多快，广泛的DOM操作都是web应用程序性能的已知瓶颈。DOM有一个树状结构，顶层的简单更改可能需要一些时间来反映底层，这可能会延迟用户界面响应，并最终增加用户体验的障碍。

幸运的是，React在用户层和实际DOM之间的虚拟DOM层解决了这个问题。虚拟DOM是DOM的虚拟表示，它保留在内存中，而不是用户的屏幕中。于是问题出现了，用户的屏幕上显示了什么？

注意：虚拟DOM由于其在Angular的缺失而引人注目。

算法跟踪在虚拟DOM上所做的更改，并确定哪些更改必须对真实DOM以及用户屏幕进行更改。假设应用程序包含几个具有自己的逻辑和呈现的React组件。由于React基本上是JavaScript，因此其中一个组件中的单个更改将操纵整个DOM，如果频繁发生，可能会影响性能，如我前面所述。

这就是虚拟DOM的用武之地。它吸收对DOM的任何更改并将其保存在内存中。然后，该算法检测在哪个组件上进行了更改，并更新DOM的该部分。此更改将反映在用户屏幕上，而不会干扰其他组件。

在React应用程序中，只有组件发生更改。这意味着无论用户交互如何，页面都保持不变。那么，如何才能让搜索引擎发现该页面呢？如果你想往前端的方向走，当然不止React，还有更多的东西要学。

**服务器端呈现**

服务器端呈现React应用程序以输出HTML内容，React需要服务器端呈现，以便在用户或爬虫点击页面时提供HTML响应。我们在客户端处理请求，并在服务器上呈现React组件。

一个主要问题是谷歌的爬虫程序还不能呈现JavaScript。也就是说，爬虫程序在呈现JavaScript代码块时将返回一个空白页面。为了让谷歌爬虫能够理解React页面，我们需要React的服务器端呈现。

使用服务器端呈现，React将以与HTML和XML页面相同的一致性呈现JavaScript页面。更好的SEO将确保你的web应用程序更容易被搜索引擎发现，并返回更好的价值。

**JSX和最后的想法**

JSX实际上是JavaScript的语法扩展，与模板语言类似，它具有JavaScript的全部功能。React将关注点与组件分离，而不是将标记和逻辑放在单独的文件中。当然，React不需要JSX，但在使用JavaScript的用户界面时，它就像一个视觉辅助工具，它还使用有用的错误代码和警告使调试更容易。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAdGVhX3llYXI_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/658dd9062cb44be19997c4115a7a227d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdGVhX3llYXI=,size_20,color_FFFFFF,t_70,g_se,x_16