React 简介

2024 年 8 月 28 日 | 3 分钟阅读

ReactJS 是一个声明式的、高效的且灵活的 JavaScript 库,用于构建可重用的 UI 组件。它是一个开源的、基于组件的前端库,只负责应用程序的视图层。它是由 Jordan Walke 创建的,他是 Facebook 的一名软件工程师。 它最初由 Facebook 开发和维护,后来被用于其产品,如 WhatsAppInstagram。Facebook 在 2011 年在其新闻提要部分开发了 ReactJS,但在 2013 年 5 月 公开发布。

现在,大多数网站都是使用 MVC(模型视图控制器)架构构建的。在 MVC 架构中,React 是 'V',代表视图,而架构由 Redux 或 Flux 提供。

一个 ReactJS 应用程序由多个组件组成,每个组件负责输出一小段可重用的 HTML 代码。组件是所有 React 应用程序的核心。 这些组件可以与其他组件嵌套,以允许复杂应用程序由简单的构建块构建。ReactJS 使用基于虚拟 DOM 的机制来填充 HTML DOM 中的数据。 虚拟 DOM 工作速度很快,因为它只更改单个 DOM 元素,而不是每次都重新加载完整的 DOM。

要创建 React 应用程序,我们编写对应于各种元素的 React 组件。 我们在更高级别的组件中组织这些组件,这些组件定义应用程序结构。 例如,我们采用一个包含许多元素(如输入字段、标签或按钮)的表单。 我们可以将表单的每个元素编写为 React 组件,然后将其组合到一个更高级别的组件中,即表单组件本身。 表单组件将指定表单的结构以及其中的元素。

为什么要学习 ReactJS?

现在,市场上有许多 JavaScript 框架(如 angular、node),但是 React 仍然进入市场并在其中广受欢迎。 以前的框架遵循传统的数据流结构,该结构使用 DOM(文档对象模型)。 DOM 是浏览器每次加载网页时创建的对象。 它在后端动态添加或删除数据,并且每当进行任何修改时,都会为同一页面创建一个新的 DOM。 这种重复创建 DOM 会造成不必要的内存浪费并降低应用程序的性能。

因此,发明了一种新技术 ReactJS 框架,以消除这种缺点。ReactJS 允许您将整个应用程序划分为各种组件。 ReactJS 仍然使用相同的传统数据流,但它不会立即直接操作浏览器的文档对象模型 (DOM); 而是操作虚拟 DOM。 这意味着,在更改我们的数据后,它不是在浏览器中操作文档,而是在完全在内存中构建和运行的 DOM 上解析更改。 更新虚拟 DOM 后,React 会确定对实际浏览器 DOM 进行了哪些更改。 React 虚拟 DOM 完全存在于内存中,并且是 Web 浏览器 DOM 的表示。 因此,当我们编写 React 组件时,我们不会直接写入 DOM; 而是编写 React 将转换为 DOM 的虚拟组件。


下一个主题React 版本