如何在React中操纵DOM元素

DOM操作是动态更改Web页面内容的过程。因为DOM总是树形结构的，所以使用DOM相当快速，遍历DOM也很容易。
在React中，对Virtual DOM进行更改，然后同步到React DOM的过程叫和解。React判断出哪些对象发生了变化的这个过程为漂移。

DOM操作过程

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

差异算法示例

当根元素不同时：

  1. // Old version
  2. <div><Tree/></div>
  4. // New update
  5. <span><Tree/></span>

React将 删除该树，然后再次重建整个树。
当元素中的属性更改时：

  1. // Old
  2. <span id="span1" />
  4. //New
  5. <span id="span2" />

只有差异会在属性中找到，并会相应地进行更改。
最后添加了新的子元素：

  1. // old
  2. <ul>
  3.     <li>Child1</li>
  4.     <li>Child2</li>
  5. </ul>
  7. //New
  8. <ul>
  9.     <li>Child1</li>
  10.     <li>Child2</li>
  11.     <li>Child3</li>
  12. </ul>

新元素将添加到列表的末尾。
在列表的开头添加了新元素：

  1. // Old 
  2. <ul>
  3.     <li>Child1</li>
  4.     <li>Child2</li>
  5. </ul>
  7. //New
  8. <ul>
  9.     <li>Child3</li>
  10.     <li>Child1</li>
  11.     <li>Child2</li>
  12. </ul>

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