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值不管添加几个都是第一个输入框内