React 的组件的 key

react key概述

key的作用

react中的key属性，它是一个特殊的属性，它是出现不是给开发者用的（例如你为一个组件设置key之后不能获取组件的这个key props），而是给react自己用的。

简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。例如下面代码：

//this.state.users内容
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <div>
    <h3>用户列表</h3>
    {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
  </div>
 )
);

上面代码在dom渲染挂载后，用户列表只有张三和李四两个用户，王五并没有展示处理，主要是因为react根据key认为李四和王五是同一个组件，导致第一个被渲染，后续的会被丢弃掉。

这样，有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。

key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。
key值不同，则react先销毁该组件(有状态组件的componentWillUnmount会执行)，然后重新创建该组件。

另外需要指明的是:

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>

react key概述

key的作用

猜你喜欢