[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下載，并且目前小程序打包是會將工程下所有文件都打入代碼包內（這個還是需要小程序那邊優化，按需會好點），所以目前你代碼包多放東西，意味著用戶得多下資源，多耗費流量，首次打開速度也會變慢
