码迷,mamicode.com
首页 > 其他好文 > 详细

react key 的理解

时间:2019-01-09 11:37:32      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:pre   元素   key   end   uid   his   turn   items   todo   

react 中的key是什么,为什么它们很重要?

key 是什么帮助反应跟踪哪些项目已更改,添加或从列表中删除

render () {
  return (
    <ul>
      {this.state.todoItems.map(({task, uid}) => {
        return <li key={uid}>{task}</li>
      })}
    </ul>
  )
}

每个键在兄弟姐妹之间都是独一无二的,这一点非常重要。

我们已经谈过几次关于和解的过程,而且这个和解过程的一部分是用最前面的一个来执行一个新的元素树的差异。

在处理列表时,键使此过程更有效,

因为React可以使用子元素上的键快速知道元素是新的还是仅在比较树时才被移动。而且不仅键使这个过程更有效率,而且没有键,React不知道哪个本地状态对应于移动中的哪个项目。所以从来没有忽略键映射。

react key 的理解

标签:pre   元素   key   end   uid   his   turn   items   todo   

原文地址:https://www.cnblogs.com/passkey/p/10242552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!