react中的key

70 阅读1分钟

Key的作用

key是虚拟dom对象的标识,在dom显示和更新时起着极其重要的作用。当列表数组中的数据发生变化生成新的虚拟 dom 后, react 进行新旧虚拟 dom的 diff 比较。

虚拟 DOM 的 diff 比较

如果key 没有变,item 数据也没变,直接使用原来的真实 DOM;如果item 数据变了,根据key值 对原来的真实 DOM 进行数据更新;key 变了,销毁原来的真实 DOM, 根据 item 数据创建新的真实 DOM 显示(即使 item 数据没有变)

key使用index问题

这里是一个使用index的案例

初始化展示是正常的,在第一个输入框出入内容试试

也没啥问题,再添加一条数据试试

A值不在输入框A里面了

A值不管添加几个都是第一个输入框内