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作为唯一标识

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容