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;
}