React 虚拟 DOM 详解

2020-10-23 08:00飞浪

介绍

您可能已经构建了几个 React 应用，或者您才刚刚开始。但无论您的经验水平如何，一个大问题是，React 如何决定重新渲染哪个组件以及如何高效地完成这一任务？在本指南中，您将了解 React 的虚拟 DOM 的工作原理，包括协调和光纤等其他概念。

虚拟 DOM 与常规 DOM

首先，虚拟 DOM (VDOM) 与影子 DOM 不同。相反，虚拟 DOM 将 UI 的表示存储在内存中，并在 React DOM 的帮助下与实际 DOM 同步。将真实 DOM 与VDOM同步的过程称为协调。在内部，React 使用称为光纤的对象来保存组件树的更多细节。您认识下面的代码片段吗？render ()函数创建了一个用于协调过程的组件树。

      import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
	<App/>
	document.getElementById('root')
);
    

使用 VDOM，就没有必要手动操作 DOM 元素的属性并更新实际的 DOM。React 解决这个问题的方法之所以如此出色的一个典型例子是渲染项目列表。实际上，列表中可能只有一个项目发生了变化。如果列表包含 100 个项目，则 99 个从未改变的节点将重新渲染。这非常低效！

React 中的协调

如上所述，协调是将 VDOM 与真实 DOM 同步的过程。为此，React 从根节点开始创建一棵树。下图显示了由四个节点组成的真实 DOM 的树形表示。

考虑到应用的状态会发生变化，React 使用其 diffing 算法（与 Git 比较文件中的更改的方式非常相似）来比较虚拟 DOM 和真实 DOM 中的根元素。每当遇到已更改的根元素时，它就会拆除状态已更改的节点并重新挂载它们。在此示例中，下面树形图中标记为绿色的节点是被重新挂载的节点。

键和属性

为了帮助 React 确定列表中要挂载哪些项目，需要为每个列表项添加一个 key 属性。使用下面的代码片段，React 将能够确定列表中的哪个元素已更改并挂载它。您提供的唯一标识符可帮助 React 识别元素。这可以是从 API 或其他方式检索到的 id。

      <ul>
  <li key="1">Skills</li>
  <li key="2">Projects</li>
</ul>

<ul>
  <li key="0">Flow</li>
  <li key="1">Skills</li>
  <li key="2">Projects</li>
</ul>
    

属性

在下面的代码块中，React 仅更改 DOM 节点的属性，而不更改底层节点本身。这就是它非常高效的原因！

      <div className="blue">
<div className="green">
    

结论

就这样！你现在就是 React 专家了。如果你想阅读更多关于 React 中的协调或虚拟 DOM 的内容，请访问 React 文档的以下部分：

您还可以查看 Saravanan Dhandapani 的指南，了解 React 的虚拟 DOM 如何使其有别于前端框架和库：

虚拟 DOM - React JS 中的差异制造者

如果您想进一步了解情况，请随时在 Twitter 上与我联系，我的邮箱是@DesmondNyamador。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

曝光30731浏览1633