微信小程序中key绑定和vue react中的key绑定不太一样
key属性作用
key相当于给每个虚拟节点绑定了id，虚拟DOM以牺牲了一点点性能（生成虚拟DOM的过程），根据非常快速的同层比对算法，同时也牺牲了少许渲染速度，以换取极高的重新渲染效率（减少需要重新渲染的节点数量）
微信中列表渲染
- 绑定key字符串， key值要是列表中唯一的字符串或数字，且不能动态改变，例如：动态表单中不要使用index作为key。
- 保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
- wx:for-item用于指定item使用是的变量名
- wx:for-index 可以指定数组当前下标的变量名
- 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
//key不需要写item.unique而是unique，省略item前缀
<view wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </view>
//*this关键字
<view wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </view>
//使用 wx:for-item 可以指定数组当前元素的变量名
<view wx:for="{{numberArray}}" wx:for-item="j" style="display: block;"> {{j}} </view>
循环对象为
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
可以清楚看到，wx下绑定key不必写item.unique，而是直接unique
wx下item，index是通过wx:for-item="item"和wx:for-index="idx"语法
vue列表渲染
<div v-for="(item,index) in objectArray" :key="index" >
</div>
react列表渲染
react中会自动展开数组，这样通过map映射将数组映射为html标签，再将映射的数组放入jsx中即可
class Book extends React.Component{
render(){
return (
<div>
{[
<h3>射雕英雄传</h3>,
<h3>神雕侠侣</h3>,
<h3>倚天屠龙记</h3>
]}
</div>
)
}
}
更进一步
<div>
{
bookArr.map((item,index)=>{
return(
<div key={index}>
<p>网站：{item.siteName}</p>
<p>网站：{item.siteUrl}</p>
<hr/>
</div>
)
})
}
</div>
注意
三者列表渲染都需要加key，增加虚拟dom可靠性，方便查询。不加key也能够提高元素重复利用性，从而提升性能，但随之而来会产生其他副作用。
每天一文章，健康你我他
