如何在React中操作DOM元素?

译文
开发 前端
DOM操作是动态更改Web页面内容的过程。因为DOM总是树形结构的,所以使用DOM相当快速,遍历DOM也很容易。

【51CTO.com快译】在React中,对Virtual DOM进行更改,然后同步到React DOM的过程叫和解。React判断出哪些对象发生了变化的这个过程为漂移。

[[392192]]

DOM操作过程

  • React更新虚拟DOM。
  • 然后将前一个状态的虚拟DOM与更新后的虚拟DOM进行比较,以识别对象中发生了哪些更改。这是用差分算法完成的。
  • 更改后的对象将在实际DOM上得到更新。

差异算法示例

当根元素不同时:

// Old version
<div><Tree/></div>

// New update
<span><Tree/></span>

React将删除该树,然后再次重建整个树。

当元素中的属性更改时:

// Old
<span id="span1" />

//New
<span id="span2" />

只有差异会在属性中找到,并会相应地进行更改。

最后添加了新的子元素:

// old
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>

//New
<ul>
<li>Child1</li>
<li>Child2</li>
<li>Child3</li>
</ul>

新元素将添加到列表的末尾。

在列表的开头添加了新元素

// Old
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>

//New
<ul>
<li>Child3</li>
<li>Child1</li>
<li>Child2</li>
</ul>

将新元素添加到开头时,它将再次重建整个列表。

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】


责任编辑:黄显东 来源: hackernoon.com
相关推荐

2021-02-26 15:10:00

前端React组件交互

2022-07-15 09:01:15

React对象编程

2010-09-08 16:50:11

JavaScriptDOM操作

2020-09-28 14:26:42

Shadow DOMWeb组件

2016-08-11 16:48:10

ReactjQueryJavaScript

2023-01-01 23:42:22

React框架暗黑模式

2021-05-23 15:46:23

React代码前端

2022-06-22 09:56:19

PythonMySQL数据库

2023-01-29 08:00:00

Instagram滤镜图片编辑

2021-02-22 08:19:49

js前端元素

2023-12-01 09:18:27

AxiosAxios 库

2024-03-18 09:50:18

Selenium元素Python

2021-03-08 11:47:34

内核Linux内核模块

2022-11-15 18:31:37

React

2009-07-09 10:15:23

PHP DOM

2010-09-28 13:50:20

2010-04-23 15:36:09

Aix操作系统

2017-06-20 12:48:55

React Nativ自定义模块Note.js

2021-07-01 11:07:49

Swift 自定义操作符

2020-11-16 08:56:02

Python
点赞
收藏

51CTO技术栈公众号