致敬 React: 為 Vue 引入容器組件和展示組件

如果你使用過 Redux 開發(fā) React，你一定聽過 容器組件（Smart/Container Components） 或 展示組件（Dumb/Presentational Components），這樣劃分有什么樣的好處，我們能否能借鑒這種劃分方式來編寫 Vue 代碼呢？這篇文章會(huì)演示為什么我們應(yīng)該采取這種模式，以及如何在 Vue 中編寫這兩種組件。

為什么要使用容器組件?

假如我們要寫一個(gè)組件來展示評(píng)論，在沒聽過容器組件之前，我們的代碼一般都是這樣寫的：

components/CommentList.vue

為 Vue 引入容器組件和展示組件

store/index.js

為 Vue 引入容器組件和展示組件

這樣寫看起來理所當(dāng)然，有沒有什么問題，或者可以優(yōu)化的地方呢？

有一個(gè)很顯而易見的問題，由于 CommentList.vue 與 項(xiàng)目的 Vuex store 產(chǎn)生了耦合，導(dǎo)致脫離當(dāng)前的項(xiàng)目很難復(fù)用。

有沒有更好的組件的組織方式，可以解決這個(gè)問題呢？是時(shí)候了解下 React 社區(qū)的容器組件的概念了。

什么是容器組件

在 React.js Conf 2015 ，有一個(gè) Making your app fast with high-performance components 的主題介紹了容器組件。

什么是容器組件

容器組件專門負(fù)責(zé)和 store 通信，把數(shù)據(jù)通過 props 傳遞給普通的展示組件，展示組件如果想發(fā)起數(shù)據(jù)的更新，也是通過容器組件通過 props 傳遞的回調(diào)函數(shù)來告訴 store。

由于展示組件不再直接和 store 耦合，而是通過 props 接口來定義自己所需的數(shù)據(jù)和方法，使得展示組件的可復(fù)用性會(huì)更高。

容器組件 和 展示組件 的區(qū)別

展示組件 容器組件
作用 描述如何展現(xiàn)（骨架、樣式） 描述如何運(yùn)行（數(shù)據(jù)獲取、狀態(tài)更新）
直接使用 store 否 是
數(shù)據(jù)來源 props 監(jiān)聽 store state
數(shù)據(jù)修改 從 props 調(diào)用回調(diào)函數(shù) 向 store 派發(fā) actions

來自 Redux 文檔 https://user-gold-cdn.xitu.io/2018/5/2/1631f590aa5512b7

用 容器組件/展示組件 模式改造上面的例子

針對(duì)最初的例子，如何快速按照這種模式來劃分組件呢？我們主要針對(duì) CommentList.vue 進(jìn)行拆分,首先是基本的概要設(shè)計(jì)：

概要設(shè)計(jì)

展示組件

  • components/CommentListNew.vue 這是一個(gè)新的評(píng)論展示組件，用于展示評(píng)論
    • comments: Array prop 接收以 { id, author, body } 形式顯示的 comment 項(xiàng)數(shù)組。
    • fetch() 接收更新評(píng)論數(shù)據(jù)的方法

展示組件只定義外觀并不關(guān)心數(shù)據(jù)來源和如何改變。傳入什么就渲染什么。

comments、fetch 等這些 props 并不關(guān)心背后是否是由 Vuex 提供的，你可以使用 Vuex，或者其他狀態(tài)管理庫，甚至是一個(gè) EventBus，都可以復(fù)用這些展示組件。

同時(shí)，可以利用 props 的類型和驗(yàn)證來約束傳入的內(nèi)容，比如驗(yàn)證傳入的 comments 是否是一個(gè)含有指定字段的對(duì)象，這在之前混合組件的情況是下是沒有的，提高了代碼的健壯性。

容器組件

  • containers/CommentListContainer.vue 將 CommentListNew 組件連接到 store

容器組件可以將 store 對(duì)應(yīng)的 state 或者 action 等封裝傳入展示組件。

編碼實(shí)現(xiàn)

Talk is cheap, show me the code!

components/CommentListNew.vue

這個(gè)文件不再依賴 store，改為從 props 傳遞。

值得注意的是 comments 和 fetch 分別定義了 type 、default 和 validator，用以定義和驗(yàn)證 props。

為 Vue 引入容器組件和展示組件

containers/CommentListContainer.vue

容器組件的職責(zé)

  • 通過 computed 來獲取到狀態(tài)更新，傳遞給展示組件
  • 通過 methods 定義回調(diào)函數(shù)，回調(diào)函數(shù)內(nèi)部調(diào)用 store 的 dispatch 方法，傳遞給展示組件
為 Vue 引入容器組件和展示組件

使用 @xunlei/vuex-connector 實(shí)現(xiàn)容器組件

上面演示的容器組件的代碼非常簡單，實(shí)際上如果直接投入生產(chǎn)環(huán)境，會(huì)產(chǎn)生一些問題。

手動(dòng)實(shí)現(xiàn)容器組件存在的不足

代碼比較繁瑣

在上面的例子中，每次傳遞一個(gè) state 都要定義一個(gè) computed，每傳遞一個(gè) mutation 或者 action 都需要定義一個(gè)方法，而且還要注意這個(gè)方法的參數(shù)要透傳過去，同時(shí)還要處理返回值，比如異步的 action 需要返回 promise 的時(shí)候，定義的這個(gè) method 也得把 action 的返回值返回出去。

無法透傳其他 props 給展示組件

比如展示組件新增了一個(gè) prop 叫做 type，可以傳遞一個(gè)評(píng)論的類型，用來區(qū)分是熱門還是最新，如果用上面的容器實(shí)現(xiàn)方式，首先需要在容器組件這層新增一個(gè) prop 叫做 type 接受外部傳來的參數(shù)，然后在展示組件內(nèi)部同樣定義一個(gè) 叫做 type 的 prop，然后才能傳遞下去。

需要透傳的 props 必須定義兩遍，增加了維護(hù)的成本。

為 Vue 引入容器組件和展示組件
為 Vue 引入容器組件和展示組件

容器組件無法統(tǒng)一進(jìn)行優(yōu)化

每一個(gè)手動(dòng)實(shí)現(xiàn)的容器組件實(shí)質(zhì)上代碼邏輯非常近似，但是沒有經(jīng)過同一層封裝，如果目前實(shí)現(xiàn)的容器組件存在一些性能優(yōu)化的地方，需要每個(gè)容器組件都進(jìn)行統(tǒng)一的修改。

無法控制展示組件不去獲取 store

因?yàn)槿萜鹘M件是通過 this.$store 獲取 store 的，展示組件內(nèi)部實(shí)質(zhì)上也可以直接跟 store 通信，如果沒有約束，很難統(tǒng)一要求展示組件不得直接和 store 通信。

使用 @xunlei/vuex-connector

@xunlei/vuex-connector 借鑒了 react redux 的 connect 方法，在 vuex 基礎(chǔ)上進(jìn)行的開發(fā)。

有以下幾個(gè)特點(diǎn)：

代碼非常簡潔

下面是上面例子中手動(dòng)實(shí)現(xiàn)的容器組件的改造版本：

comonents/ConnectCommentListContainer.vue
為 Vue 引入容器組件和展示組件

通過 connector 的 connnect 方法，傳入要映射的配置，支持 mapStateToProps, mapGettersToProps, mapDispatchToProps, mapCommitToProps 這四種，每一種都是只要配置一個(gè)簡單的 map 函數(shù)，或者字符串即可。

然后在返回的函數(shù)中傳入要連接的展示組件即可，是不是非常的簡潔。

容器組件本身也可以復(fù)用

由于借鑒了 redux 優(yōu)雅的函數(shù)式風(fēng)格， connector 的 connnect 方法 返回的函數(shù)實(shí)際上是一個(gè)高階組件，也就是一個(gè)可以創(chuàng)建組件的函數(shù)。這樣帶來了額外的好處，不同的展示組件也可以復(fù)用同一個(gè)容器組件。

舉個(gè)例子：

如果你寫了多個(gè)版本的評(píng)論展示組件，接受的數(shù)據(jù)和更新數(shù)據(jù)的方式都是一樣的，那么你就沒有必要為每個(gè)版本的評(píng)論組件都搞一個(gè)容器組件了，只要復(fù)用同一個(gè)高階組件函數(shù)即可。

問題來了，connector 是什么？

connector 實(shí)際上是一個(gè)能獲取到 store 實(shí)例的連接器，可以在初始化 vuex store 的時(shí)候進(jìn)行初始化。

為 Vue 引入容器組件和展示組件

一個(gè) Vue 程序?qū)嶋H上只需要初始化一次即可。

支持透傳其他 props 給展示組件

VuexConnector 實(shí)現(xiàn)的時(shí)候采用了函數(shù)式組件( functional: true )

函數(shù)式組件是無狀態(tài) (沒有響應(yīng)式數(shù)據(jù))，無實(shí)例 (沒有 this 上下文)。

在作為包裝組件時(shí)函數(shù)式組件非常有用，比如，當(dāng)你需要做這些時(shí)：

  • 程序化地在多個(gè)組件中選擇一個(gè)
  • 在將 children, props, data 傳遞給子組件之前操作它們。

另外，函數(shù)式組件只是一個(gè)函數(shù)，所以渲染開銷也低很多。然而，對(duì)持久化實(shí)例的缺乏也意味著函數(shù)式組件不會(huì)出現(xiàn)在 Vue devtools 的組件樹里。

因此需要透傳的 props 可以直接透傳，需要通過 map 方式從 store 里進(jìn)行獲取的 props 直接會(huì)根據(jù)配置生成。

統(tǒng)一封裝方便后續(xù)統(tǒng)一優(yōu)化

VuexConnector.connect 方法將本來需要重復(fù)做的事情進(jìn)行了抽象，也帶來了后期進(jìn)行統(tǒng)一優(yōu)化和升級(jí)的便利。

可以控制展示組件無法直接與 store 通信

VuexConnector 不依賴 this.$store，而是依賴初始化傳入的 store 實(shí)例，容器組件可以用 connect 將展示組件與 store 進(jìn)行連接。

由于不依賴 this.$store，我們?cè)诔绦蛉肟?new Vue 的時(shí)候，就不需要傳入 store 實(shí)例了。

比如，之前我們是通過下面的方式進(jìn)行初始化：

為 Vue 引入容器組件和展示組件

使用了 VuexConnector 之后，在最初 new Vue 的時(shí)候就不需要也最好不要傳遞 store 了，這樣就避免了 this.$store 泛濫導(dǎo)致代碼耦合的問題。

引入容器組件/展示組件模式帶來的好處

可復(fù)用性

容器組件/展示組件的劃分，采用了單一職責(zé)原則的設(shè)計(jì)模式，容器組件專門負(fù)責(zé)和 store 通信，展示組件只負(fù)責(zé)展示，解除了組件的耦合，可以帶來更好的可復(fù)用性。

健壯性

由于展示組件和容器組件是通過 props 這種接口來連接，可以利用 props 的校驗(yàn)來增強(qiáng)代碼的可靠性，混合的組件就沒有這種好處。

另外對(duì) props 的校驗(yàn)可以采取一下幾種方式：

Vue 組件 props 驗(yàn)證

可以驗(yàn)證 props 的類型，默認(rèn)可以校驗(yàn)是否是以下類型：

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array
  • Symbol

如果你的 props 是類的一個(gè)實(shí)例，type 也可以是一個(gè)自定義構(gòu)造器函數(shù)，使用 instanceof 檢測(cè)。

如果還是不滿足需求，可以自定義驗(yàn)證函數(shù)：

為 Vue 引入容器組件和展示組件

TypeScript 類型系統(tǒng)

Vue 組件 props 驗(yàn)證對(duì)于對(duì)象或者其他復(fù)雜的類型校驗(yàn)還是不太友好，所以很多人也推薦大家的 props 盡量采取簡單類型，不過如果你有在用 TypeScript 開發(fā) Vue 應(yīng)用，可以利用 TypeScript 靜態(tài)類型檢查來聲明你的 props 。

為 Vue 引入容器組件和展示組件

可測(cè)試性

由于組件做的事情更少了，使得測(cè)試也會(huì)變得容易。

容器組件不用關(guān)心 UI 的展示，只關(guān)心數(shù)據(jù)和更新。

展示組件只是呈現(xiàn)傳入的 props ，寫單元測(cè)試的時(shí)候也非常容易 mock 數(shù)據(jù)層。

引入容器組件/展示組件模式帶來的限制

學(xué)習(xí)和開發(fā)成本

因?yàn)槿萜鹘M件/展示組件的拆分，初期會(huì)增加一些學(xué)習(xí)成本，不過當(dāng)你看完這篇文章，基本上也就入門了。

在開發(fā)的時(shí)候，由于需要封裝一個(gè)容器，包裝一些數(shù)據(jù)和接口給展示組件，會(huì)增加一些工作量， @xunlei/vuex-connector 通過配置的方式可以減輕不少你的工作量。

另外，在展示組件內(nèi)對(duì) props 的聲明也會(huì)帶來少量的工作。

總體來說，引入容器組件/展示組件模式投入產(chǎn)出比還是比較值得的。

延伸閱讀

代碼示例

Vue Vuex 容器-展示組件模式 Demo

Demo 在線地址:

https://xunleif2e.github.io/vue-vuex-container-component/dist/

Demo 源碼：

https://github.com/xunleif2e/vue-vuex-container-component

@xunlei/vuex-connector

基于 Vue 生態(tài)實(shí)現(xiàn)的Vuex store Connector

@xunlei/vuex-connector 源碼:

https://github.com/xunleif2e/vuex-connector

歡迎 Star

掃一掃關(guān)注迅雷前端公眾號(hào)

[圖片上傳失敗...(image-401aa7-1564585849407)]

作者：binggg

校對(duì)：珈藍(lán)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、active-class是哪個(gè)組件的屬性？嵌套路由怎么定義？答：vue-router模塊的router-lin...
    jane819閱讀 1,831評(píng)論 0贊 15
  • Vue也已經(jīng)升級(jí)到2.0版本了，到現(xiàn)在為止（2016/11/19）比較流行的MVVM框架有AngularJS（也有...
    彬_仔閱讀 27,399評(píng)論 12贊 114
  • 在使用React中，你是否會(huì)出現(xiàn)過一個(gè)文件的代碼很多，既存在應(yīng)用數(shù)據(jù)的讀取和處理，又存在數(shù)據(jù)的顯示，而且每個(gè)組件還...
    指尖跳動(dòng)閱讀 766評(píng)論 0贊 2
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性：var data = { a:...
    云之外閱讀 2,373評(píng)論 0贊 6
  • vue概述 在官方文檔中，有一句話對(duì)Vue的定位說的很明確：Vue.js 的核心是一個(gè)允許采用簡潔的模板語法來聲明...
    li4065閱讀 7,624評(píng)論 0贊 25

友情鏈接更多精彩內(nèi)容