成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

高級 Vue 組件模式 (9)

李義 / 1587人閱讀

摘要：在中，這種類型的組件也可以叫做函數(shù)式組件。這種組件和普通組件相比的優(yōu)勢主要在于，它是無狀態(tài)的，這意味著它的可測試性和可讀性更好，同時(shí)一些情況下，渲染開銷也更小。

09 使用 Functional 組件 目標(biāo)

到此為止，我們的 toggle 組件已經(jīng)足夠強(qiáng)大以及好用了，因此這篇文章不會再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會發(fā)現(xiàn)，整篇文章中，我?guī)缀鯖]有對 toggle-on 和 toggle-off 做出任何更改和重構(gòu)，因此這篇文章著重來重構(gòu)一下它們。

之前一直沒有對它們進(jìn)行任何更改，一個(gè)很重要的原因是因?yàn)樗鼈冏銐蚝唵危M件內(nèi)部沒有任何 data 狀態(tài)，僅靠外部傳入的 prop 屬性 on 來決定內(nèi)部渲染邏輯。這聽起來似乎有些耳熟啊，沒錯，它們就是在上一篇文章中所提及的木偶組件（Dump Component）。在 Vue 中，這種類型的組件也可以叫做函數(shù)式組件（Functional Component）。

仔細(xì)觀察 app 組件的模板代碼，會發(fā)現(xiàn)存在一定的冗余性的，比如：

{{firstTimes}}
{{firstTimes}}

這里兩行代碼的邏輯幾乎一模一樣，但我們卻要寫兩次。同時(shí)你還會發(fā)現(xiàn)一個(gè)問題，由于其內(nèi)部的渲染邏輯是通過 v-if 來描述的，實(shí)際上在 Vue 渲染完成后，會渲染兩個(gè) dom 節(jié)點(diǎn)，在切換時(shí)的狀態(tài)從 devtool 中觀察的效果大概是這樣子的：

未顯示的節(jié)點(diǎn)是一個(gè)注釋節(jié)點(diǎn)，而顯示的節(jié)點(diǎn)是一個(gè) div 節(jié)點(diǎn)。

這篇文章將著重解決這兩個(gè)問題：

將 toggle-on 和 toggle-off 合二為一，減少代碼冗余性

重構(gòu)以 v-if 實(shí)現(xiàn)的渲染邏輯，改為更好的動態(tài)渲染邏輯（僅使用一個(gè) dom 節(jié)點(diǎn)）

實(shí)現(xiàn) 轉(zhuǎn)化為函數(shù)式組件

首先，先將已經(jīng)存在的 toggle-on 和 toggle-off 組件轉(zhuǎn)化為函數(shù)式組件，很簡單，只需保留 template 代碼塊即可，同時(shí)在左邊的標(biāo)簽上聲明 functional 屬性，或者在 script 代碼塊中聲明 functional: true 也是可以的。唯一要注意的是，由于函數(shù)式組件沒有 data 也沒有 this，因此所有模板中用到的與 prop 相關(guān)的渲染邏輯，都要作出相應(yīng)更改，比如原先的 on 要改為 props.on的形式，由于這里我們要移除 v-if 的渲染邏輯，因此直接移除即可，詳細(xì)代碼如下：

// ToggleOn.vue




// ToggleOff.vue

除此之外，還可以發(fā)現(xiàn)，我為兩個(gè)組件增加不同的顏色樣式以便于區(qū)分當(dāng)前的開關(guān)狀態(tài)。

實(shí)現(xiàn) ToggleStatus 組件

接下來實(shí)現(xiàn)今天的主角，ToggleStatus 組件，由于我們的目標(biāo)是將原先的二個(gè)函數(shù)式組件合二為一，因此這個(gè)組件本身應(yīng)當(dāng)也是一個(gè)函數(shù)式組件，不過我們需要使用另外一種寫法，如下：

關(guān)于這種寫法中，render 和 createElement 方法的參數(shù)就不贅述了，不熟悉的讀者請參考官方文檔?？梢园l(fā)現(xiàn)，這里將 toggle-on 和 toggle-off 以模塊的形式導(dǎo)入，之后由 props.on 的值進(jìn)行判定，從而決定哪一個(gè)被作為 createElement 方法的第一個(gè)參數(shù)進(jìn)行渲染。

諸如 data 和 children 參數(shù)我們原封不動的傳入 createElement 即可，因?yàn)檫@里對于 toggle-status 組件的定位是一個(gè)代理組件，對于其他參數(shù)以及子元素應(yīng)當(dāng)原封不動的傳遞給被代理的組件中。

之后在 app 組件中更改響應(yīng)的渲染邏輯即可，如下：

// controlled toggle
{{firstTimes}}

// uncontrolled toggle
{{secondTimes}}
成果

一切如原先一樣，只不過這次我們可以少寫一行冗余的代碼了。同時(shí)打開 devtool 可以發(fā)現(xiàn)，兩種狀態(tài)的組件會復(fù)用同一個(gè) dom 節(jié)點(diǎn)，如下：

你可以通過下面的鏈接來看看這個(gè)組件的實(shí)現(xiàn)代碼以及演示：

sandbox: 在線演示

github: part-9

總結(jié)

關(guān)于函數(shù)式組件，我是在 React 中第一次接觸，其形式和它的名字一樣，就是一個(gè)函數(shù)。這種組件和普通組件相比的優(yōu)勢主要在于，它是無狀態(tài)的，這意味著它的可測試性和可讀性更好，同時(shí)一些情況下，渲染開銷也更小。

我們在日常工作中，可能會經(jīng)常遇到動態(tài)渲染的需求，一般情況下，我們均會通過 v-if 來解決，在比較簡單的情況下，v-if 確實(shí)一種很簡單且高效的方式，但是隨著組件復(fù)雜度的上升，很可能會出現(xiàn)面條式的代碼，可讀性和可測試性都大打折扣，這是不妨換一個(gè)角度從渲染機(jī)制本身將組件重構(gòu)為更小的顆粒，并用一個(gè)函數(shù)式組件動態(tài)的代理它們，可能會得到更好的效果，舉一個(gè)比較常見的例子，比如表單系統(tǒng)中的表單項(xiàng)，一般都具有多種渲染狀態(tài)，如編輯狀態(tài)、瀏覽狀態(tài)、禁用狀態(tài)等等，這時(shí)利用該模式來抽離不同狀態(tài)的渲染邏輯就非常不錯。

目錄

github gist

關(guān)注公眾號 全棧101，只談技術(shù)，不談人生

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98814.html

相關(guān)文章

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    pumpkin9 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    Carson 評論0 收藏0

  • 前端面試題總結(jié)（js、html、小程序、React、ES6、Vue、算法、全棧熱門視頻資源）

    摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項(xiàng)目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進(jìn)，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項(xiàng)目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...

    muzhuyu 評論0 收藏0

  • Vue高效UI組件庫—iView開發(fā)實(shí)踐

    摘要：它的文檔也是相當(dāng)詳細(xì)，每個(gè)功能都配有詳細(xì)說明和實(shí)例代碼，直接復(fù)制就可以使用，我們也計(jì)劃在明年啟動英文文檔翻譯計(jì)劃。明年會啟動英文文檔翻譯計(jì)劃，也希望喜歡和支持，同時(shí)英語不錯的同學(xué)可以加入我們，一起參與翻譯。 前段時(shí)間在微軟參加活動，分享了 TalkingData 開源的基于 Vue.js 的高效 UI 組件庫 iView 的一些開發(fā)經(jīng)驗(yàn)，現(xiàn)整理成文，和大家探討。 showImg(htt...

    wean 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<