react key

作者: 一土二月鸟 | 来源:发表于2021-01-06 18:43 被阅读0次

为什么不能拿数组的index作为react的key

  • 因为对于动态列表,如果索引对应的值发生了变化,尤其是排在前面的索引被删除后,会导致后面的列表要全部重新更新一遍
// 修改前
  <li key="0">0</li>
  <li key="1">1</li>
  <li key="2">2</li>

// 删除第一项后
  <li key="0">1</li>
  <li key="1">2</li>
这样会导致1和2都需要重新更新一遍dom,第一项也需要删除,这样整个dom都发生了变化

但如果采用id,删除第一项后为
  <li key="1">1</li>
  <li key="2">2</li>
这样比对key后,发现没有变化则不需要重新更新1和2的dom

相关文章

  • React(Key)

    key适用于Virtual DOM树新旧情形如下时 旧 新 我们只是前插了一个TodoItem 节点,但如果没有k...

  • react key

    为什么不能拿数组的index作为react的key 因为对于动态列表,如果索引对应的值发生了变化,尤其是排在前面的...

  • react使用知识总结(持续更新)

    1. key react凡是动态创建的元素必须要有的标志,并且所有元素的key唯一,在 React Diff 算法...

  • 性能优化

    React:react:key-diffshouldComponentUpdate-避免无意义state渲染服务端...

  • React中key的用处

    key的原理 React 元素可以具有一个特殊的属性 key,这个属性不是给用户自己用的,而是给 React 自己...

  • ReactNative性能优化相关

    1,Component Key 如果component用了random key,那么react会在做虚拟dom比较...

  • [react]10、react性能优化

    1、列表&key 一、React更新流程 React在props或state发生改变时,会调用React的rend...

  • react-key

    react有一个特殊属性key 应用场景根据数组动态创造,不确定数量,顺序的子节点时使用需要对某一组件的更新操作强...

  • React列表 & Key

    渲染多个组件 使用 {} 在 JSX 内构建一个元素集合。 基础列表组件 在一个组件中渲染列表。 key key ...

  • React的key

    react中的key的选择父元素下面的子节点之间需要设置一个唯一的key值,方便diff算法计算。Key 应该具有...

网友评论

      本文标题:react key

      本文链接:https://www.haomeiwen.com/subject/virooktx.html