[TOC]
# 条件渲染&&列表渲染
条件渲染以及列表渲染作为数据驱动视图的重要部分，值得一提
1.条件渲染的` wx:if` 以及 `hidden`
* `wx:if` 会产生局部渲染，销毁条件块（或者重新渲染）
* `hidden` 就是直接控制 `display block/none` 了
所以官网给出的结论是
> 一般来说，`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 `wx:if` 较好。
2.列表渲染
```html
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" wx:key="*this">
{{idx}}: {{itemName.message}}
</view>
```
这里其他 for,index，item 这些循环渲染基本的东西就不具体说了，谈谈这个 wx:key
假如我们更新array数组，预期来说视图重新渲染，但是我们假如只是在 array 中 push 更多的元素，我们的想法应该是重新排序，不去重复创建视图原来已经有的元素，这里为了标识 item，我们就可以用 wx:key ，有助于提升渲染的效率，并且能够保持状态（如`<input/>`中的输入内容，`<switch/>`的选中状态）
# video 组件
开发时用到video组件，遇到一些问题也拿出来讲下
首先开发者需要记住的一个很重要的点
> map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上，也无法对原生组件设置 css 动画。
其次video组件是没办法跟着屏幕滚动的，假如你放了一个video组件fixed在顶部，它也是无法跟着屏幕滚动的，开发者工具可以实现，但是真机滚动后是会出现黑影的，视频还是一直定位在原来的位置（这个也体现了本文开头的环境的区别），要解决这个问题就只能是不能全屏滚动，用页面的一部分scroll-view滚动即可，让视频不用滚动
还有一个就是video组件其实你用wx:if去控制渲染隐藏是有问题的，当你多次切换，会发现在某些机型上发热严重，抓包发现之前创建的video实例并没有真正地随着wx:if销毁，还在请求数据，所以，假如需要控制渲染隐藏video组件的时候，可以尝试使用hidden属性配合wx.createVideoContext控制暂停来解决问题
# swiper-view 实现频道滑动切换
为了实现跟原生应用接近的体验，采用手势左右滑动来实现频道切换
先讲讲swiper-view如何实现滑动的呢？
从上图swiper-item可以看到其实就是改变translate去实现的
swiper-item绝对定位，并加入will-change:auto提升为合成层，在实现动画translate时让页面不发生重绘，在GPU完成
注意到一个 absolute，所以swiper-item内部的内容是无法把外部给撑开的，所以无法实现自适应，必须自己指定高度
我们的需求是要实现上面预留导航栏，全屏滑动，css上就可以这样
```css
page {
box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 100%;
／* 预留顶部导航栏 *／
padding-top: 89rpx;
}
.swiper-container {
height: 100%;
}
```
假如你还想在里面放入可滚动的列表项，毫无疑问得使用scroll-view，而不是 view（overflow:auto)了，不然reachBottom 的触发就会出问题，因为本来就只有一屏了
加入 scroll-view 的话，Page 下拉加载是跟 scroll-view 相冲突的，所以要么抛弃下拉加载，要么只能使用触顶加载
# 小程序性能调优
近期官网也出来了一个优化建议，开发者务必要看看
> [优化建议](https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html)
大体上就是
* 不要频繁地去setData,能合成一个setData尽量合成一个
* 不需要视图更新的data不要使用setData
* setData数据不要过大（当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程）
* 由于用户使用小程序是从CDN下载，并且目前小程序打包是会将工程下所有文件都打入代码包内（这个还是需要小程序那边优化，按需会好点），所以目前你代码包多放东西，意味着用户得多下资源，多耗费流量，首次打开速度也会变慢
