什么是渲染？

 

　　如果我们想了解 React 渲染和重新渲染的工作方式，那么最好了解库幕后发生的事情。

 

　　渲染是可以在不同抽象级别上理解的术语。根据上下文，它的含义略有不同。无论如何，最终它描述了生成图像的过程。

 

　　首先，我们需要了解什么是 DOM（文档对象模型）：“ W3C 文档对象模型（DOM）是一种平台和语言无关的接口，它允许程序和脚本动态访问和更新文档的内容，结构和样式。”

 

　　用简单的英语来说，这意味着 DOM 代表您在打开网站时在屏幕上看到的内容，并通过标记语言 HTML 表示。JavaScript 还具有一个 DOM，它表示为一个对象，其中根元素为 document。

 

　　您可以通过 DOM 编程界面使用 JavaScript 修改 DOM，该界面包含 document.write，Node.appendChild 或等功能 Element.setAttribute。

 

　　什么是 VDOM？

 

　　然后，我们有了 React 的虚拟 DOM（或 VDOM），它是其之上的另一个抽象层。它由您的 React 应用程序的元素组成。

 

　　您应用程序中的状态更改将首先应用于 VDOM。如果 VDOM 的新状态需要更改 UI，ReactDOM 库将通过尝试仅更新需要更新的内容来有效地做到这一点。

 

　　例如，如果仅元素的属性发生变化，React 将仅通过调用 document.setAttribute（或类似方法）来更新 HTML 元素的属性。

 

　　红点表示 DOM 树的更新。

 

　　更新 VDOM 不一定会触发真实 DOM 的更新。

 

　　更新 VDOM 后，React 会将其与 VDOM 的先前快照进行比较，然后仅更新实际 DOM 中已更改的内容。如果没有任何变化，则完全不会更新真实的 DOM。 比较旧的 VDOM 和新的 VDOM 的过程称为 diffing。

 

　　实际的 DOM 更新速度很慢，因为它们会导致 UI 的实际重绘。React 通过更新实际 DOM 中可能的最小数量来提高效率。

 

　　因此，我们必须意识到本地和虚拟 DOM 更新之间的区别。

 

　　在 React 的关于对帐的文档中阅读有关此工作原理的更多信息。

 

　　这对性能意味着什么？

 

　　当我们在 React 中谈论渲染时，实际上是在谈论 render 函数的执行，这并不总是意味着 UI 的更新。

 

　　我们来看一个例子：

 

　　在函数组件中，整个函数的执行与类组件中的 render 函数等效。

 

　　当父组件的状态发生变化（在本例中为 App）时，这两个 Tile 组件将重新渲染，即使第二个组件甚至没有收到任何道具。

 

　　这意味着该 render 函数被调用了 3 次，但是实际的 DOM 修改只在 Tile 显示消息的组件中发生一次：

 

　　红点再次代表渲染。

 

　　在 React 中，这意味着调用 render 函数，在真实的 DOM 中，这意味着重新绘制 UI。

 

　　好消息是您不必担心 UI 重绘的性能瓶颈。React 已经为您优化了。

 

　　坏消息是：左侧所有这些红点表示这些组件的渲染功能已执行。

 

　　这些渲染函数的执行有两个缺点：React 必须在每个组件上运行其差异算法，以检查是否应更新 UI。

 

　　这些渲染函数或函数组件中的所有代码将再次执行。

 

　　可以说，第一点并不那么重要，因为 React 可以非常有效地计算出差异。危险在于您编写的代码在每个 React 渲染上都会一遍又一遍地执行。

 

　　在上面的示例中，我们有一个非常小的组件树。但是想像一下，如果每个节点有更多的子代，而这些子代又可能具有子代成分，会发生什么。我们将看到如何优化这一点

 

　　React 什么时候重新渲染？

 

　　上面我们看到了导致用户界面重新绘制的原因，但是从什么开始调用 React 的 render 函数呢？

 

　　每当组件状态改变时，React 都会调度渲染。

 

　　计划渲染意味着这不会立即发生。React 将尝试为此找到最佳时机。

 

　　更改状态意味着当我们调用 setState 函数时，React 触发更新（在 React Hooks 中，您可以从获得此 fn useState）。这不仅意味着将调用组件的 render 函数，而且还意味着 将重新渲染其所有后续子组件，无论其 prop 是否已更改。

 

　　如果您的应用程序结构不良，那么您运行的 JavaScript 可能比您预期的要多得多，因为更新父节点意味着要运行所有子代的 render 功能。