react中的key属性与angular中的index属性

1、react中渲染数据列表

异常示例：

render(){

const olist = this.props.list.map((item,index)=>{
return <li key={index}>{item.name}</li>
})

return(
<h1>{olist}</h1>
)
}

这里可以理解key为li元素的唯一标识，react在render时，会比较更新前后的元素 key 值，如果相同则更新，如果不同则销毁之前的，重新创建一个元素。

最好不要设置数组的index为li的key，若涉及到数据的动态变更，例如数组的增、删、改，这时index作为key会导致展示错误的数据。

可以使用fetch过来的数据id字段，作为动态元素的索引：

优化后：

render(){

const olist = this.props.list.map((item,index)=>{
return <li key={item.id}>{item.name}</li>
})

return(
<h1>{olist}</h1>
)
}

2、angular1中渲染数据列表

异常示例：

<tr ng-repeat="item in list track by $index">
<td ng-style="setStyle({{item.num}})">
{{item.name}}
</td>
</tr>

$scope.setStyle = function(num){
if(num>=100){
return {
color:'#2BD99F'
}
}
else{
return{
color:'#4ca6ff'
}
}
}

这个与上面的react中key类似，最好避免在动态数据列表中使用

$index

作为渲染时的唯一标识，这时

$index

作为标识会导致展示错误的数据。

解决方法，可以用数据的id代替

$index

作为唯一标识：

优化后：

<tr ng-repeat="item in list track by item.id">
<td ng-style="setStyle({{item.num}})">
{{item.name}}
</td>
</tr>

2、angular4中渲染数据列表

异常示例:

<ul>
<li *ngFor="let item of list;trackBy: index">
{{item.id}}
</li>
</ul>

angular1 - 2 - 4 的基本语法思路一致，可以自定义trackBy的条件:

优化后：

<ul>
<li *ngFor="let item of list;trackBy: trackFun">
{{item.num}}
</li>
</ul>

trackFun(index, item) {
return item.id;
}