React(DOM树的局部更新)

伴随用户操作，界面需要更新，用于渲染浏览器中的DOM树的Virtual DOM也会随之更新。但旧的DOM树不会随之销毁，为减小更新成本，React会在比对新旧Virtual DOM不同点的基础上，对DOM树进行局部更新。

• 1.不同节点

旧Virtual DOM

<span>
<TodoItem />
<TodoItem />
<span />

新Virtual DOM

<div>
<TodoItem />
<TodoItem />
<div />

作为根节点的div与span类型不同。则DOM树中span内的所有节点都会被卸载，重建。这种情况浪费巨大，要注意避免。

• 2. 相同节点

旧Virtual DOM

<div>
<TodoItem  text="1"/>
<div />

新Virtual DOM

<div>
<TodoItem text="2"/>
<div />

DOM树中的<TodoItem />不被卸载，只是属性值由"1"变为"2"

• 节点后插

<div>
<TodoItem  text="1"/>
<TodoItem  text="2"/>
<div />

<div>
<TodoItem  text="1"/>
<TodoItem  text="2"/>
<TodoItem  text="3"/>
<div />

<TodoItem text="3"/>会被装载，其余DOM树中的节点不变。