前端测试题:(解析)React中，key的作用是？

考核内容: 前端Reactjs实战用法

题发散度: ★★★

试题难度: ★★★

看看大家的选择

解题:

在react的使用过程中遇到过这样的警告，需要对渲染的组件添加key属性，那么，这个key属性的作用到底是什么呢？

我们可以通过同一个数组testArray来渲染两个不同的列表，一个列表项指定了key属性，另一个不指定key属性，然后我们观察他们打乱前后的运行结果。

打乱顺序前，在input中填入内容

打乱顺序后

我们可以观察一下，打乱顺序后，有无指定key属性运行结果的异同。

相同的是，每一个项的input中的value都得到了保留

不同的是，如果我们不指定key属性，列表中组件的标题和input在打乱顺序之后，好像已经对不上号了，那么，是什么原因造成的呢？

我们来简单的了解一下react的diff算法策略，我们都知道，react为了提升渲染性能，在内部维持了一个虚拟dom，当渲染结构有所变化的时候，会在虚拟dom中先用diff算法先进行一次对比，将所有的差异化解决之后，再一次性根据虚拟dom的变化，渲染到真实的dom结构中。

所以要确保key值的唯一，事实上如果key值不唯一的话，react只会渲染第一个，剩下的react会认为是同一项，直接忽略。

在线测试:

答案：

 A. 在 React Diff 算法中 React 会借助元素的 Key 值
     来判断该元素是新近创建的还是被移动而来的元素

书中自有好图丫（首图来源于 好图丫 小程序）