React 内部原理（第一部分）——基本概念和先决条件

本文是理解 React 高级概念的先决条件。建议你在学习更高级的内容之前先阅读本文。

如果你曾经使用过 React，你会经常听到“虚拟 DOM”这个词。那么，什么是虚拟 DOM？为什么 React 会使用它？

什么是 DOM？

DOM，即文档对象模型，是浏览器使用的树形数据结构。它以树形数据结构的形式呈现 UI。DOM 的任何更新都会导致 UI 的重新渲染或重绘。

什么是虚拟 DOM？

虚拟 DOM 是一种编程概念，指的是 UI 的克隆版本保存在内存中。对此克隆版本的更改不会直接导致重新渲染。它会通过 React DOM 等库与浏览器中的真实 DOM 同步。

为什么 React 使用虚拟 DOM？

浏览器中的 DOM 模型是一种树形数据结构，这使得节点的更新和搜索变得简单快捷。UI 的重新渲染是一个性能瓶颈。UI 组件越多，DOM 更新的开销就越大。

虚拟 DOM 是真实 DOM 的克隆。虚拟 DOM 发生更改时不会重新渲染。像 React DOM 这样的库可以计算虚拟 DOM 与真实 DOM 之间的差异，并应用最少的更改。

Shadow DOM 和 Virtual DOM 有什么区别？

Shadow DOM 是一种浏览器功能，用于限定 Web 组件中的变量和 CSS 范围。

虚拟 DOM 是 JS 中的库在浏览器 API 之上实现的概念。

什么是和解？

每次要在浏览器中渲染 UI 时，React 中的这个render()函数都会被调用。你可以说，顶层渲染函数会递归地返回一个 React 元素树。在下一个渲染周期中，这棵组件树会被重新生成。React 需要比较两棵树的差异，并将差异应用到真实的浏览器 DOM 中。React 使用一种算法来比较两棵树的差异，以确定 UI 的哪些部分需要更改，这种算法被称为“协调”。延伸阅读

React 中元素、组件和实例的区别

元素是一个普通的对象，它描述了你希望在屏幕上以 DOM 节点或其他组件的形式呈现的内容。元素可以在其 props 中包含其他元素。创建 React 元素的成本很低。元素一旦创建，就永远不会改变。

组件可以通过多种不同的方式声明。它可以是一个带有方法的类。或者，在简单的情况下，也可以将其定义为函数。render()无论哪种情况，它都以 props 作为输入，并返回一个元素树作为输出。

实例就是你在编写的组件类中所引用的this。它用于存储本地状态并响应生命周期事件。

React 中元素在内存中是如何表示的？

当元素的type标签名是字符串时，它表示具有该标签名的 DOM 节点，并props与其属性相对应。这就是 React 将渲染的内容。例如：

{
  type: 'button',
  props: {
    className: 'button',
    children: {
      type: 'b',
      props: {
        children: 'Hello World!'
      }
    }
  }
}

这只是另一种表述方式：

<button class='button'>
  <b>
    Hello World!
  </b>
</button>

组成元素

当type元素的 是函数或类时，React 会将该组件称为render函数。例如：

{
  type: Button,
  props: {
    color: 'blue',
    children: 'Hello World!'
  }
}

React 将调用组件render()的方法Button

上述结果将是

{
  type: 'button',
  props: {
    className: 'button',
    children: {
      type: 'b',
      props: {
        children: 'Hello World!'
      }
    }
  }
}

React 将继续重复该render()函数的递归调用，直到它知道所有分支的叶元素。

注意：元素只是组件在内存中的表示，并非元素实际实例的引用。元素一旦创建，就无法修改。

关于元素、组件和实例的进一步阅读。

当 React 想要更新真实 DOM 时会发生什么？

如前所述，元素是不可变的。您无法更新它们的子元素或属性。它代表特定时间点的 UI。在每个渲染周期，都会创建一个新的 DOM 模型。计算两者之间的差异，并将最小的更改应用于真实 DOM。

总结

React 不会在组件状态每次改变时都进行完全重新渲染。但是，如果root组件状态发生变化，整个组件树都会重新生成。我们将在本系列的下一章中对此进行更深入的探讨。

来源

1. https://reactjs.org/blog/2015/12/18/react-components-elements-and-instances.html

2. https://programmingwithmosh.com/react/react-virtual-dom-explained/

3. https://reactjs.org/docs/rendering-elements.html

在本系列的下一篇文章中，我将介绍 React 15 之前使用的协调算法。请在 Dev 上关注我或订阅我的新闻通讯以获取更新