ReactJS 架构

React 库建立在坚实的基础上。它简单、灵活且可扩展。正如我们之前了解到的，React 是一个用于在 Web 应用程序中创建用户界面的库。 React 的主要目标是使开发人员能够使用纯 JavaScript 创建用户界面。

通常，每个用户界面库都会引入一种新的模板语言（我们需要学习）来设计用户界面，并提供在模板内部或单独编写逻辑的选项。

React 没有引入新的模板语言，而是引入了以下三个简单的概念 -

React 元素

HTML DOM 的 JavaScript 表示。 React 提供了一个 API，React.createElement 来创建 React 元素。

JSX

用于设计用户界面的 JavaScript 扩展。 JSX 是一种基于 XML 的可扩展语言，它支持略有修改的 HTML 语法。 JSX 可以编译为 React 元素，并用于构建用户界面。

React 组件

React 组件是 React 应用程序的主要构建块。它使用 React 元素和 JSX 来设计其用户界面。

React 组件是一个 JavaScript 类（扩展了 React 组件类）或一个纯 JavaScript 函数。 React 组件具有属性、状态管理、生命周期和事件处理程序。 React 组件可以执行简单和高级逻辑。

让我们在 React 组件章节中了解有关组件的更多信息。

React 应用程序的工作流程

在本章中，让我们通过创建和分析一个简单的 React 应用程序来了解 React 应用程序的工作流程。

打开命令提示符并转到您的工作区。

接下来，创建一个文件夹 static_site，并将目录更改为新创建的文件夹。

示例

接下来，创建一个文件 *hello.html* 并编写一个简单的 React 应用程序。

接下来，使用服务 Web 服务器提供应用程序。

输出

接下来，打开您喜欢的浏览器。在地址栏中输入 https://:5000，然后按 Enter。

让我们分析代码并进行一些修改，以便更好地理解 React 应用程序。

在这里，我们使用了 React 库提供的两个 API。

React.createElement

用于创建 React 元素。 它需要三个参数 -

• 元素标签
• 元素属性作为对象
• 元素内容 - 它也可以包含嵌套的 React 元素

ReactDOM.render

用于将元素渲染到容器中。 它需要两个参数 -

• React 元素 OR JSX
• 网页的根元素

嵌套的 React 元素

由于 React.createElement 允许嵌套的 React 元素，让我们添加嵌套元素，如下所示 -

示例

输出

它将生成以下内容 -

<div><h1> Hello React!</h1></div> 

使用 JSX

接下来，让我们完全删除 React 元素并引入 JSX 语法，如下所示

在这里，我们包含了 babel 以将 JSX 转换为 JavaScript，并在 script 标签中添加了 *type="*text/babel*"*。

接下来，运行应用程序并打开浏览器。应用程序的输出如下 -

接下来，让我们创建一个新的 React 组件 Greeting，然后尝试在网页中使用它。

结果相同，如下所示 -

通过分析应用程序，我们可以可视化 React 应用程序的工作流程，如下图所示 图。

React 应用程序调用 reactdom.render 方法，绕过使用 React 组件（以 JSX 或 React Elementor 格式编码）创建的用户界面和容器来渲染用户界面。

ReactDOM.render 处理 JSX 或 React 元素并发出虚拟 DOM。

虚拟 DOM 将被合并并渲染到容器中。

React 应用程序架构

React 库只是一个 UI 库，它没有实现任何用于编写复杂应用程序的特殊模式。 开发人员可以自由选择他们选择的设计模式。 React 社区提倡某些设计模式。

其中一种模式是 Flux 模式。 React 库还提供了许多概念，如高阶组件、context、render props、refs 等，以编写更好的代码。 React Hooks 是一种新兴的概念，用于在大型项目中进行状态管理。 让我们尝试了解 React 应用程序的高级架构。

• React 应用程序从单个根组件开始。
• 核心组件是通过使用一个或多个组件创建的。
• 每个组件都可以与任何其他组件以任何级别嵌套。
• 组合是 React 库的核心概念之一。 因此，每个组件都是通过组合较小的组件而不是从另一个组件继承来构建的。
• 大多数组件都是用户界面组件。
• React 应用程序可能包含用于特定目的的第三方组件，例如 路由、动画、状态管理 等。