这个key属性的含义是啥,当删除列表的某一项时,为啥总是删除的是最后一项的内容。听说更新前后react渲染会根据key值来决定怎么渲染,当一样时,不重新渲染,不一样时就重新渲染?感觉好像有点不太对。。。
这个key属性的含义是啥,当删除列表的某一项时,为啥总是删除的是最后一项的内容。听说更新前后react渲染会根据key值来决定怎么渲染,当一样时,不重新渲染,不一样时就重新渲染?感觉好像有点不太对。。。
你说的是对的,应该知道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>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
3 回答2.3k 阅读✓ 已解决
React 实践心得:key 属性的原理和用法 —— 作者:叶斋