React - 架构
React 库建立在坚实的基础上。它简单、灵活且可扩展。正如我们之前所学，React 是一个用于在 Web 应用程序中创建用户界面的库。React 的主要目的是使开发者能够使用纯 JavaScript 创建用户界面。通常，每个用户界面库都会引入一种新的模板语言（我们需要学习它）来设计用户界面，并提供在模板内部或单独编写逻辑的选项。
React 没有引入新的模板语言，而是引入了以下三个简单概念：
React elements
HTML DOM 的 JavaScript 表示。React 提供了一个 API，React.createElement，用于 创建 React Element。
JSX
一种用于设计用户界面的 JavaScript 扩展。JSX 是一种基于 XML 的可扩展语言，支持略作修改的 HTML 语法。JSX 可以被编译为 React Elements，并用于创建用户界面。
React component
React component 是 React 应用程序的主要构建块。它使用 React elements 和 JSX 来设计其用户界面。React component 基本上是一个 JavaScript class（扩展 React.component class）或纯 JavaScript function。React component 具有 properties、state management、life cycle 和 event handler。React component 能够处理简单以及高级逻辑。
让我们在 React Component 章节中了解更多关于 component 的内容。
React 应用程序的架构
React 库只是一个 UI 库，它并不强制要求使用任何特定的模式来编写复杂的应用程序。开发者可以自由选择自己喜欢的 design pattern。React 社区提倡某些 design pattern。其中一种是 Flux pattern。React 库还提供了许多概念，如 Higher Order component、Context、Render props、Refs 等，以编写更好的代码。React Hooks 是一个不断发展的概念，用于在大项目中进行 state management。让我们尝试理解 React 应用程序的高级架构。
React app 以单个 root component 开始。
Root component 由一个或多个 component 构建。
每个 component 可以嵌套其他 component 到任意级别。
Composition 是 React 库的核心概念之一。因此，每个 component 是通过组合更小的 component 构建的，而不是从另一个 component 继承。
大多数 component 是用户界面 component。
React app 可以包含第三方 component，用于特定目的，如 routing、animation、state management 等。
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 type="module">
import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom/client';
function App() {
return React.createElement('h1', null, 'Hello React!');
}
const root = ReactDOM.createRoot(document.getElementById('react-app'));
root.render(React.createElement(App));
</script>
</body>
</html>
接下来，使用 serve web server 启动应用程序。
serve ./hello.html
输出
接下来，打开你喜欢的浏览器。在地址栏输入 http://localhost:3000，然后按回车。
让我们分析代码并进行少量修改，以更好地理解 React 应用程序。
在这里，我们使用了 React library 提供的三个 API。
React.createElement
用于创建 React element。它需要三个参数：
- 元素标签
- 元素属性（作为对象）
- 元素内容 - 也可以包含嵌套的 React element
ReactDOM.createRoot
用于创建主容器元素。
root.render
用于将元素渲染到容器中。它需要一个参数：
- React Element 或 JSX
嵌套 React element
由于 React.createElement 支持嵌套 React element，让我们添加嵌套元素，如下所示：
示例
<script type="module">
const root = ReactDOM.createRoot(document.getElementById('react-app'));
root.render(React.createElement(App));
</script>
输出
它将生成以下内容：
<div><h1> Hello React!</h1></div>
使用 JSX
接下来，让我们完全移除 React element，并引入 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 JSX!</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 component，Greeting，然后尝试在网页中使用它。
<script type="text/babel">
function Greeting() {
return <div><h1>Hello JSX!</h1></div>
}
ReactDOM.render(<Greeting />, document.getElementById('react-app') );
</script>
结果相同，如下所示：
通过分析应用程序，我们可以可视化 React 应用程序的工作流程，如下图所示。
React app 调用 ReactDOM.render 方法，传入使用 React component（以 JSX 或 React element 格式编码）创建的用户界面以及用于渲染用户界面的容器。
ReactDOM.render 处理 JSX 或 React element 并生成 Virtual DOM。
Virtual DOM 将被合并并渲染到容器中。