react中组件的key属性

这个key属性的含义是啥,当删除列表的某一项时,为啥总是删除的是最后一项的内容。听说更新前后react渲染会根据key值来决定怎么渲染,当一样时,不重新渲染,不一样时就重新渲染?感觉好像有点不太对。。。

阅读 4.9k
2 个回答

你说的是对的,应该知道React使用virtual dom来比较UI状态的变化,如果DOM中的某一节点更新时重新渲染,一样的话就不渲染。key属性的作用就在与解决渲染List的这种难题,简单来说,例如你有一个List:

<li>Orange</li> <li>Banana</li>

如果想更新成

<li>Apple</li> <li>Orange</li>

那dom比较算法就可以有多种选择,例如销毁两个,生成两个新的代替,或者销毁banana,在orange前插入apple等等,当list多的时候情况就比较复杂,所以React为了使得Dom比较算法最快,需要你提供给每一个list元素一个特殊的key,这样就容易比较前后两个大型的List了,帮助React如何移动、替代、销毁、插入节点,例如

let List = this.props.fruits.map((fruit) => {
            return <FruitList key={fruit.id}
                              name={fruit.name}
                    />
         });
 
return (
    <div>
        {List}
    </div>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题