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

首页 > 前端测试题:(解析)React中key的作用是 > 列表

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

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

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

题发散度: ★★★

试题难度:★★

看看大家的选择

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

解题:

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

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

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

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

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

打乱顺序后

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

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

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

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

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

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

在线测试:

答案:

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

书中自有好图丫(首图来源于 好图丫 小程序)