React 简介：真实 DOM 和虚拟 DOM

各位读者大家好！

我已经写了几个月关于JavaScript 的文章了。扎实的 JavaScript 基础是学习React.JS 的先决条件。

在过去的一年里，我一直在使用React.JS工作和开发项目，我发现它非常灵活且对于构建用户界面非常有用，并且使用 React.JS 开发 Web 应用程序的过程变得更加容易。

首先，让我们了解一下什么是 React.JS，以及为什么它在当今的开发人员中如此熟悉。

什么是 React？

◾ React 是一个高效、灵活且开源的JavaScript 库，用于构建简单且可扩展的前端，由Facebook创建。◾
它主要用于构建单页应用程序。它还允许我们创建可重用的UI 组件。◾
React.JS不是像 Angular 或 React Native 这样的 JavaScript框架
。◾ 它是MVC（模型视图控制器）应用程序的视图层。

React 如何工作？

React 并不直接操作浏览器的真实 DOM，而是在内存中创建一个虚拟 DOM。React 会找出发生了哪些更改，并在更改真实/浏览器 DOM中的任何内容之前仅操作虚拟 DOM。 为了更好地理解这一点，我们需要了解真实/浏览器 DOM 与 React 虚拟 DOM 之间的区别。

什么是真实/浏览器 DOM？

DOM代表“文档对象模型” 。它将Web 应用程序的整个 UI 表示为树形数据结构。

简单来说，它是Web应用程序的HTML元素的结构表示。

每当应用程序 UI 的状态发生变化时，DOM 都会更新并表示该变化。每次变化都会对 DOM 进行操作并重新渲染以更新应用程序 UI，这会影响性能并使其变慢。

因此，随着 UI 组件的增多和 DOM 结构的复杂化，DOM 更新的成本将更加高昂，因为每次更改都需要重新渲染。

什么是 React 的虚拟 DOM？

为了使真实 DOM 的性能更好、更快，虚拟 DOM 的概念应运而生。虚拟 DOM 只不过是 DOM 的虚拟表示。

但关键的区别是，每次更改时，虚拟 DOM 都会更新，而不是真实 DOM。

与真实 DOM类似，虚拟 DOM也以树状结构呈现。每个元素都是树中的一个节点。当新元素添加到应用程序 UI 时，也会向树中添加一个节点。如果任何元素的状态发生变化，就会创建一个新的虚拟 DOM 树。虚拟 DOM会以最佳方式（或者说，以对真实 DOM 进行最少操作的方式）对真实 DOM 进行更改。因此，通过减少重新渲染整个真实 DOM 的成本和操作，虚拟 DOM 可以提高效率并提升性能。

现在我们已经对真实 DOM 和虚拟 DOM 有了基本的了解，让我们关注一下React如何使用虚拟 DOM工作。

🔸 在 React 中，每个 UI 都是一个单独的组件，每个组件都有自己的状态。🔸
React 遵循可观察模式并观察状态的变化。🔸
每当任何组件的状态发生变化时，React都会更新虚拟 DOM 树，但不会更改真实的 DOM 树
。🔸更新后，React 会将虚拟 DOM的当前版本与之前的版本进行比较。🔸 React 知道虚拟 DOM中哪些对象发生了变化，基于此它只更改真实 DOM中的那些对象，从而进行最少的操作。🔸 此过程称为“diffing”。下图将更清楚地说明这个概念。

图中红色圆圈表示已更改的节点。这意味着这些组件的状态发生了变化。React 计算虚拟 DOM 树的当前版本和先前版本的差异，并重新渲染整个父子树以显示更改后的 UI。然后，更新后的树会被批量更新（这意味着对真实 DOM 的更新是批量发送的，而不是每次状态发生变化时都发送更新）到真实 DOM。

为了更深入地了解它，我们需要了解React render() function。

在此之前，我们需要了解 React 的一些最重要的特性。我不会深入探讨这些特性，因为我稍后会在其他单独的文章中详细阐述。但现在我们需要了解的是：

🔹 JSX
JSX代表JavaScript XML。它是JS 的语法扩展。通过使用 JSX，我们可以在包含JavaScript 代码的同一文件中编写HTML 结构。

🔹 组件
React 应用中的每个 UI 都是一个组件。组件是​​独立且可重用的代码片段。一个应用程序可能有多个组件。
组件可以分为两种类型：类组件和功能组件。类组件Class Components是有状态的，因为它们可以使用其“状态”来更改 UI。功能组件Functional Components是无状态组件。它们充当JavaScript 函数，可以接受称为“props”的任意参数。 最近，React Hooks被引入用于在功能组件中使用状态。

🔹 生命周期方法
生命周期方法是 React内置的特殊方法，用于在组件 DOM 生命周期内对其进行操作。React 中的每个组件都会经历一个事件生命周期。

该render()方法是使用最多的生命周期方法。

它是React 类组件中唯一必需的方法。因此，render()它会在每个类组件中被调用。render
() 方法负责将组件渲染到 UI。render() 方法包含所有应该显示在屏幕上的逻辑。如果我们不想在屏幕上显示任何内容，它也可以包含一个null值。

示例如下：

class Header extends React.Component{
render(){
      return <div> React Introduction </div>
   }
}

此示例将显示在 render() 方法内部编写的 JSX。

当组件中的state或prop更新时， render()将返回一个不同的 React 元素树。
然后，React计算如何更新 UI 以匹配最新的树变化。首先，React 更新其虚拟 DOM ，并仅更新真实 DOM中已更改的对象。

在接下来的文章中，我将详细介绍 React 的功能。如果您喜欢这篇文章，请保存、点赞并关注 unicorn，也请关注我，以便随时关注我的其他文章。