react key的作用

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

简单来说，react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，

相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。例如下面代码：

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认为李四和王五是同一个组件，导致第一个被渲染，后续的会被丢弃掉。

index作为key是一种反模式

在list数组中，用key来标识数组创建子组件时，若数组的内容只是作为纯展示，而不涉及到数组的动态变更，其实是可以使用index作为key的。

但是，若涉及到数组的动态变更，例如数组新增元素、删除元素或者重新排序等，这时index作为key会导致展示错误的数据。本文开始引入的例子就是最好的证明。

{this.state.data.map((v,idx)=><Item key={idx} v={v} />)}

// 开始时：['a','b','c']=>

<ul>

    <li key="0">a <input type="text"/></li>

    <li key="1">b <input type="text"/></li>

    <li key="2">c <input type="text"/></li>

</ul>

// 数组重排 -> ['c','b','a'] =>

<ul>

    <li key="0">c <input type="text"/></li>

    <li key="1">b <input type="text"/></li>

    <li key="2">a <input type="text"/></li>

</ul>

key的值要稳定唯一

在数组中生成的每项都要有key属性，并且key的值是一个永久且唯一的值，即稳定唯一。

在理想情况下，在循环一个对象数组时，数组的每一项都会有用于区分其他项的一个键值，相当数据库中主键。这样就可以用该属性值作为key值。但是一般情况下可能是没有这个属性值的，这时就需要我们自己保证。

但是，需要指出的一点是，我们在保证数组每项的唯一的标识时，还需要保证其值的稳定性，不能经常改变

var localCounter = 1;

this.data.forEach(el=>{

    el.id = localCounter++;

});

//向数组中动态添加元素时，

function createUser(user) {

    return {

        ...user,

        id: localCounter++

    }

}

巴特西

react key的作用

index作为key是一种反模式

key的值要稳定唯一

最新文章

热门文章