react key 的使用---笔记

react key 的使用—笔记

1 为什么要用key
官方详细介绍
当react进行渲染时 会进行遍历两个dom节点的子元素 进行对比 有变化时 就产生一个mutation（官方说法） 个人理解是变化值 如果说在子元素末尾进行渲染 react会进行匹配第一个和第二个元素所对应的树 然后进行插入
这种插入方式 并不特别消耗性能 如果说 元素需要进行插入第一个时 react会重建第一个元素后的所有元素 这样就进行了较大的性能消耗 当拥有key值的时候 react会使用key来进行匹配原有树上子元素和现有树上子元素进行匹配 和比对 这时候react会计算出后面的元素仅仅是进行了移动 这样性能就提升了
2 key
key值在兄弟节点之间必须是唯一的

 <li key={1)}>
      {value}
  </li>
   <li key={1}>
      {value}
  </li>
  //错误

key使用位置：元素的 key 只有放在就近的数组上下文中才有意义。（官方原话）

// 正确 
      <ul>
        <li key={xx.toString()}></li>
      </ul>  
      // 错误     
      <ul key={xx.toString()}>
        <li ></li>
      </ul>

key 会传值给react（不懂）但不会传给组件（理解是：在父子组件传值中不能用key作为名称 props 否则不会被显示）