關於自定義組件的那些事兒

自定義組件的原理

運行基本原理

自定義組件的具體建立方法，hello world示例，請參考智能小程序官網：

smartprogram.baidu.com/docs/develo…

瞭解原理以前，咱們來看一下自定義組件中的js構造器：

以上包括了自定義組件的邏輯部份內容，開發者能夠在Component構造器的各個生命週期回調函數中，編寫本身的邏輯代碼。

在Component構造器中寫的自定義組件的原型，運行在小程序的邏輯層(jscore)中，並不與本身的

swan模板運行在一塊兒--swan模板運行在視圖層(webview)中。

因此，setData等操做，都是經過數據通信，將要設置的數據傳遞到真正的視圖層，而後進行自定義組件的渲染。同理，全部的生命週期，也是當組件的模板在視圖層渲染完畢以後，傳遞迴邏輯層進行觸發的。

因此對於setData的調用，也如同頁面的setData同樣，須要謹慎調用。由於每一次setData都意味着一次jscore與webview的數據通信。

類 or 累？

看過自定義組件基本使用方法的同窗確定知道，自定義組件內使用的樣式類是獨立空間，即： 組件模板中使用的css樣式類並不會應用上使用該自定義組件的頁面上的樣式類。

emmmmm，若是上面那句話把你繞暈了，咱們來看一下例子：

​展現效果以下：

展現效果以下：

咱們能夠看到，雖然都是渲染到同一個頁面上，可是頁面上定義的樣式類，在組件中並無生效。

那麼一樣的，在組件中定義的類，也不會透出去，影響整個頁面，例：

效果以下：

那麼這個「隔離「是如何作到的呢？ 咱們仔細觀察一下自定義組件最後生成的模板和樣式：

真相大白，原來是自定義組件中使用的樣式類，都被編譯增長了前綴。這才使內外的類能夠互相隔離。這種設計也有好處也有缺點，好處就不用再想以前用不少框架那樣本身去尋找解決方案(如：CSSinJS或css modules)自定義組件中直接集成了內置解決方案。壞處就是可能有些css上的使用限制，好比（摘自官網）：

這塊也請讀者在開發過程當中多注意。

TIPS: 關於css的解決方案，官方貌似還在持續優化，相信不久就能夠迎來限制更小的集合了。

組件間的通信

父子自定義組件之間，能夠使用兩種方式進行通信：

• 利用自定義事件
• 利用dispatch消息

利用自定義事件

利用自定義事件在父組件中進行事件的綁定，在子組件中進行自定義事件的派發。 例：

dispatch消息

經過 dispatch 方法，組件能夠向組件樹的上層派發消息。消息將沿着組件樹向上傳遞，直到遇到第一個處理該消息的組件，則中止。經過 messages 能夠聲明組件要處理的消息。messages 是一個對象，key 是消息名稱，value 是消息處理的函數，接收一個包含 target(派發消息的組件) 和 value(消息的值) 的參數對象。 (摘自san官網)

若是組件有消息須要一直向上透傳，則能夠使用這個方法，只要沒有組件組件攔截，消息則會一直向上傳遞。

例：

其中根組件中使用了父組件，父組件中使用了子組件。當子組件調用dispatch方法時，則會一直傳遞到根組件上（由於父組件並無message消費本次dispatch）。

至於父組件想通知子組件嘛，能夠經過props的改變，來觸發子組件。

經過上述兩種方式都可以實現父子組件的通信，固然，各位讀者也能夠試試本身引入事件流，或者其餘三方庫，來豐富本身的應用通信方式。