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