介绍
如今，前端框架和库正成为现代 Web 开发技术栈中不可或缺的一部分。React.js 就是一个前端库，它已逐渐成为 JavaScript 社区中现代 Web 开发的首选框架。.
React.js是什么？
React.js 是由 Facebook 精心打造的开源 JavaScript 库，旨在简化构建交互式用户界面的复杂过程。您可以将使用 React 构建的用户界面视为一系列组件的集合，每个组件负责输出一小段可重用的 HTML 代码。.
在 React 中，你通过创建可重用的组件来开发应用程序，你可以把这些组件想象成独立的乐高积木。这些组件是最终界面的各个组成部分，组装起来就构成了应用程序的完整用户界面。.
React 在应用程序中的主要作用是管理应用程序的视图层，提供最佳、最高效的渲染实现，这与模型-视图-控制器 (MVC) 模式中的 V 非常相似。React.js 鼓励开发者将复杂的用户界面分解成可重用的独立组件，而不是将整个用户界面视为一个整体。通过这种方式，ReactJS 框架将 JavaScript 的速度和效率与更高效的 DOM 操作方式相结合，从而更快地渲染网页并创建高度动态且响应迅速的 Web 应用程序。.
React.js 简史
2011年，Facebook拥有庞大的用户群，面临着一项艰巨的任务。它希望通过创建一个更动态、响应更快、效率更高的界面，为用户提供更丰富的用户体验。.
Facebook 的软件工程师 Jordan Walk 创建 React 的目的正是为了实现这一点。React 提供了一种更系统、更结构化的方式来创建具有可重用组件的动态交互式用户界面，从而简化了开发流程。.
Facebook 的新闻推送是第一个使用 React 的应用。凭借其革命性的 DOM 操作和用户界面设计，React 彻底改变了 Facebook 的 Web 开发方式，并在向开源社区发布后迅速在 JavaScript 生态系统中流行起来。.
React.js 是做什么的？
通常情况下，您可以通过在浏览器中输入网页的网址来请求该网页。然后，您的浏览器会向服务器发送请求以获取该网页，服务器会提供该网页。如果您点击该网页上的链接跳转到网站上的另一个页面，则会向服务器发送新的请求以获取该新页面。.
这种在浏览器（客户端）和服务器之间来回加载的模式，在你尝试访问网站上的每个新页面或资源时都会持续进行。这种典型的网站加载方式通常效果不错，但对于数据量非常大的网站来说，来回重新加载整个网页会造成冗余，并降低用户体验。.
此外，在传统的 JavaScript 应用程序中，当数据发生变化时，需要手动操作 DOM 来反映这些变化。您必须识别哪些数据发生了变化，并更新 DOM 以反映这些变化，这会导致页面重新加载。.
React 采用了一种不同的方法，它允许你构建所谓的单页应用程序 (SPA)。单页应用程序在首次请求时加载单个 HTML 文档。然后，它使用 JavaScript 更新网页中需要更新的特定部分、内容或主体。.
这种模式被称为客户端路由，因为客户端无需在用户每次请求新页面时都重新加载整个网页。React 会将请求分解，仅获取需要更改的部分，从而在不重新加载整个页面的情况下完成更改。这种方法可以带来更好的性能和更动态的用户体验。.
React 依赖于虚拟 DOM，它是真实 DOM 的一个副本。每当数据状态发生变化时，React 的虚拟 DOM 都会立即重新加载以反映新的变化。然后，React 会将虚拟 DOM 与真实 DOM 进行比较，以确定究竟发生了哪些变化。.
React 会找到成本最低的方式来更新实际的 DOM，而无需重新渲染整个 DOM。因此，React 组件和 UI 可以快速反映变化，因为无需在每次更新时都重新加载整个页面。.
如何使用 React.js
与其他框架（例如 Angular）不同，React 对代码规范或文件组织方式没有严格的规定。这意味着开发者和团队可以自由地设定最适合他们的规范，并以他们认为合适的方式实现 React。由于 React 的灵活性，您可以根据需要使用其全部或部分功能。.
使用 React，您可以创建按钮、界面组件，甚至整个应用程序的 UI。您可以逐步将其集成到现有应用程序中，并添加一些交互功能；或者，根据您的需求，从零开始构建功能强大的 React 应用程序。.
将 React 集成到现有网站中
如果您想为网站添加动态交互功能，React 是一个绝佳的选择。通过集成 React，您可以创建可重用的交互式组件，并将其放置在网站的任何位置，例如侧边栏或小部件。以下是实现此目标的简要步骤。.
步骤 1：将 CDN 脚本添加到 HTML
- 首先将 CDN 中的 React 核心库 API 添加到网站的 HTML index 文件中。.
- 然后从 CDN 导入 React DOM。这是为了将组件渲染到文档对象模型 (DOM) 中所必需的。.
- 接下来，从 CDN 添加 Babel，它可以转换 React 代码以确保浏览器兼容性。另外，别忘了上传你的 React 组件文件。.
第一步是将两个主要的 CDN 脚本添加到网站的 HTML 索引文件中。您需要这些脚本才能通过 CDN 服务将 React 加载到您的应用程序中。.
<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/[email protected]/babel.js'></script>
<script type="text/babel" src="like_widget.js"></script>
步骤二：在您的网站上标记渲染位置
确定 React 组件在 HTML 中的渲染位置。这可以通过添加一个元素来实现。 <div> 它使用了一个唯一的标识符，我们将在 React 代码中引用该标识符。.
<!-- ... Your existing HTML markup ... -->
<div id="like_widget_container"></div>
<!-- ... Your existing HTML markup ... -->
步骤 3：构建 React 组件
- 在这种情况下，创建一个名为 like_widget.js 的 React 组件。.
- 该组件将包含一个简单的函数，该函数返回一个 JSX 语句，用于渲染消息“Hello World”。.
- 然后借助 ReactDOM，我们将此组件渲染到 DOM 中，目标是我们之前在 HTML 中设置的唯一 ID。.
// Custom React component function that returns a JSX syntax
const ActualWidget = () => Hello World;
// Select the container
const container = document.getElementById("like_widget_container");
// Render the component to the DOM
ReactDOM.render(, container);
运行该程序后，浏览器会在下图你标记的位置显示“Hello World”。.
您可能已经注意到 ActualWidget 函数返回了一种名为 JavaScript XML (JSX) 的特殊语法。您可以使用 JSX 与 React 结合使用，轻松地将 HTML 和 JavaScript 结合起来。Facebook 开发 JSX 作为 JavaScript 的语法扩展，旨在通过将 HTML 直接嵌入 JavaScript 代码来扩展其功能。有了 JSX，就无需将 HTML 和 JS 代码分开，因为 React 允许您直接在 JavaScript 代码中编写声明式 HTML。.
创建一个功能齐全的 React 应用
虽然你可以轻松地将 React 集成到现有的 Web 应用中来创建界面的小部分，但使用 React 构建完整的 Web 应用更为实用。然而，React 的确有一些繁琐的工具配置要求，在创建新的 React 应用时，这些配置往往令人望而生畏且十分繁琐。.
幸运的是，您无需学习这些构建设置或自行配置构建工具。Facebook 创建了一个名为 cre-react-app 的 Node 命令行工具，可以帮助您构建 React 应用。该软件包可让您开箱即用，并为 React 应用提供一致的结构，方便您在不同的 React 项目之间切换。.
创建一个新的 React 项目非常简单，只需在终端中运行以下命令：
npx create-react-app my-new-app
cd my-new-app
npm start
React.js 示例
作为 React.js 的起源，Facebook 充分展现了该库的强大功能。React 简化了 Facebook 的实时功能，例如点赞、评论和状态更新，从而确保了流畅且动态的用户体验。React 的模块化特性使得 Facebook 的界面能够不断演进，并适应其超过 28 亿月活跃用户的需求。.
Instagram Web 是一个由 React.js 驱动的交互式元素平台。从故事视图到私信，每个功能都充分展现了 React 快速处理复杂用户交互的能力。该平台美观且用户友好的界面也证明了 React 在实现高性能交互方面的卓越表现。.
Netflix
Airbnb 展示了 React.js 如何将复杂数据转化为直观的用户体验。每个房源列表、交互式地图和实时预订功能都是 React 组件协同运作的典范，共同打造了从浏览到预订的流畅用户体验。.
