React(Key)

key适用于Virtual DOM树新旧情形如下时

旧

<div>
<TodoItem text="one" />
<TodoItem text="two" />
</div>

新

<div>
<TodoItem text="zero" />
<TodoItem text="one" />
<TodoItem text="two" />
</div>

我们只是前插了一个TodoItem 节点，但如果没有key，<TodoItem text="one" />
<TodoItem text="two" />都会被卸载，然后<TodoItem text="zero" />，<TodoItem text="one" />，<TodoItem text="two" />会被加载，这会造成DOM树更新成本的剧增。

之所以出现上述这种更新方案，是因为react在判断两个新旧节点不同时所依据的"标识"是各节点位置。上述情形中，新旧节点位置不同，react自然会认为新旧节点不同。

而按照我们的理想状态，应该让<TodoItem text="one" />,<TodoItem text="two" />不被卸载，仅仅只是<TodoItem text="zero" />被加载，这就需要各个节点增加一个新标识，这个标识应该不随节点位置的变化而变化。这个标识，就被我们称为"key"。

• 采用"key"的解决方案

旧

<div>
<TodoItem key={1} text="one" />
<TodoItem key={2} text="two" />
</div>

新

<div>
<TodoItem key={0} text="zero" />
<TodoItem key={1} text="one" />
<TodoItem key={2} text="two" />
</div>
···