React的数据渲染循环key的作用

1.key是虚拟dom对象的标识,在更新显示时起到重要的作用

2.当状态中的数据发生变化的时候,react会根据【新数据】生成【新的虚拟DOM】,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较,比较规则见3

3.当旧虚拟DOM找到了与新虚拟DOM相同的Key:发现虚拟DOM中是否发生改变如果发生改变那生成新的真实DOM,随后替换旧的真实DOM,如果发现没有改变那就直接使用之前的真实DOM
旧虚拟DOM未找到与新虚拟DOM相同的key根据数据创建新的真实DOM,随后渲染到页面当中

4.用index作为key可能会存在当数据量过大的时候重新去新旧DOM作比较的时候会多次重新生成真实DOM,造成不必要的DOM刷新问题,而且随着数据发生变化数据的索引值会发生变化让对应的DOM元素更新界面产生问题

5.对于key可以用每条数据的唯一标识,一般常用id作为唯一标识

你可能感兴趣的:(React的数据渲染循环key的作用)