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.component 类）或纯 JavaScript 函数。React 组件具有属性、状态管理、生命周期和事件处理程序。React 组件能够执行简单和高级逻辑。

让我们在 React 组件章节中进一步学习组件。

React 应用的架构

React 库只是一个 UI 库，它不会强制使用任何特定的模式来编写复杂的应用。开发者可以自由选择他们喜欢的设计模式。React 社区提倡某些设计模式。其中一种模式是 Flux 模式。React 库还提供了许多概念，如高阶组件、上下文、渲染 Props、Refs 等，以编写更好的代码。React Hooks 是一种不断发展中的概念，用于在大项目中进行状态管理。让我们尝试理解 React 应用的高级架构。

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

React 应用的工作流程

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

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

cd /go/to/your/workspace

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

mkdir static_site 
cd static_site

示例

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

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script language="JavaScript"> 
         element = React.createElement('h1', {}, 'Hello React!') 
         ReactDOM.render(element, document.getElementById('react-app')); 
      </script> 
   </body> 
</html>

接下来，使用 serve Web 服务器提供服务。

serve ./hello.html

输出

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

让我们分析代码并进行少量修改，以更好地理解 React 应用。

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

React.createElement

用于创建 React 元素。它期望三个参数：

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

ReactDOM.render

用于将元素渲染到容器中。它期望两个参数：

React 元素或 JSX
网页的根元素

嵌套的 React 元素

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

示例

<script language="JavaScript">
   element = React.createElement('div', {}, React.createElement('h1', {}, 'Hello React!'));
   ReactDOM.render(element, document.getElementById('react-app')); 
</script>

输出

它将生成以下内容：

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

使用 JSX

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

<!DOCTYPE html> 
<html> 
   <head> 
      <meta charset="UTF-8" /> 
      <title>React Application</title> 
   </head> 
   <body> 
      <div id="react-app"></div> 
      <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> 
      <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> 
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
      <script type="text/babel"> 
         ReactDOM.render(
            <div><h1>Hello React!</h1></div>, 
            document.getElementById('react-app') 
         ); 
     </script> 
   </body> 
</html>

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

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<script type="text/babel"> 
   ... 
   ... 
</script>

接下来，运行应用并打开浏览器。应用的输出如下所示：

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

<script type="text/babel"> 
   function Greeting() {
      return <div><h1>Hello JSX!</h1></div> 
   } 
   ReactDOM.render(<Greeting />, document.getElementById('react-app') ); 
</script>

结果相同，如下所示：

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

React 应用通过传递使用 React 组件创建的用户界面（以 JSX 或 React 元素格式编写）和容器来调用ReactDOM.render 方法，以渲染用户界面。

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

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

React 应用的架构

打印页面