react key 的理解

Posted 2021-02-02 passkey

react 中的key是什么，为什么它们很重要？

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

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

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

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

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

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