資訊專欄INFORMATION COLUMN
摘要：在中，這種類型的組件也可以叫做函數(shù)式組件。這種組件和普通組件相比的優(yōu)勢主要在于，它是無狀態(tài)的，這意味著它的可測試性和可讀性更好，同時一些情況下，渲染開銷也更小。
09 使用 Functional 組件 目標
到此為止，我們的 toggle 組件已經(jīng)足夠強大以及好用了，因此這篇文章不會再為它增加新的特性。如果你是從第一篇文章一直讀到這里的讀者，你一定會發(fā)現(xiàn)，整篇文章中，我?guī)缀鯖]有對 toggle-on 和 toggle-off 做出任何更改和重構(gòu)，因此這篇文章著重來重構(gòu)一下它們。
之前一直沒有對它們進行任何更改，一個很重要的原因是因為它們足夠簡單，組件內(nèi)部沒有任何 data 狀態(tài)，僅靠外部傳入的 prop 屬性 on 來決定內(nèi)部渲染邏輯。這聽起來似乎有些耳熟啊，沒錯，它們就是在上一篇文章中所提及的木偶組件（Dump Component）。在 Vue 中，這種類型的組件也可以叫做函數(shù)式組件（Functional Component）。
仔細觀察 app 組件的模板代碼，會發(fā)現(xiàn)存在一定的冗余性的，比如：
{{firstTimes}} {{firstTimes}}
這里兩行代碼的邏輯幾乎一模一樣，但我們卻要寫兩次。同時你還會發(fā)現(xiàn)一個問題，由于其內(nèi)部的渲染邏輯是通過 v-if 來描述的，實際上在 Vue 渲染完成后，會渲染兩個 dom 節(jié)點，在切換時的狀態(tài)從 devtool 中觀察的效果大概是這樣子的：
未顯示的節(jié)點是一個注釋節(jié)點，而顯示的節(jié)點是一個 div 節(jié)點。
這篇文章將著重解決這兩個問題：
將 toggle-on 和 toggle-off 合二為一，減少代碼冗余性
重構(gòu)以 v-if 實現(xiàn)的渲染邏輯，改為更好的動態(tài)渲染邏輯（僅使用一個 dom 節(jié)點）
實現(xiàn) 轉(zhuǎn)化為函數(shù)式組件首先，先將已經(jīng)存在的 toggle-on 和 toggle-off 組件轉(zhuǎn)化為函數(shù)式組件，很簡單，只需保留 template 代碼塊即可，同時在左邊的標簽上聲明 functional 屬性，或者在 script 代碼塊中聲明 functional: true 也是可以的。唯一要注意的是，由于函數(shù)式組件沒有 data 也沒有 this，因此所有模板中用到的與 prop 相關(guān)的渲染邏輯，都要作出相應更改，比如原先的 on 要改為 props.on的形式，由于這里我們要移除 v-if 的渲染邏輯，因此直接移除即可，詳細代碼如下：
// ToggleOn.vue// ToggleOff.vue
除此之外，還可以發(fā)現(xiàn)，我為兩個組件增加不同的顏色樣式以便于區(qū)分當前的開關(guān)狀態(tài)。
實現(xiàn) ToggleStatus 組件接下來實現(xiàn)今天的主角，ToggleStatus 組件，由于我們的目標是將原先的二個函數(shù)式組件合二為一，因此這個組件本身應當也是一個函數(shù)式組件，不過我們需要使用另外一種寫法，如下：
關(guān)于這種寫法中，render 和 createElement 方法的參數(shù)就不贅述了，不熟悉的讀者請參考官方文檔。可以發(fā)現(xiàn)，這里將 toggle-on 和 toggle-off 以模塊的形式導入，之后由 props.on 的值進行判定，從而決定哪一個被作為 createElement 方法的第一個參數(shù)進行渲染。
諸如 data 和 children 參數(shù)我們原封不動的傳入 createElement 即可，因為這里對于 toggle-status 組件的定位是一個代理組件，對于其他參數(shù)以及子元素應當原封不動的傳遞給被代理的組件中。
之后在 app 組件中更改響應的渲染邏輯即可，如下：
// controlled toggle成果{{firstTimes}} // uncontrolled toggle{{secondTimes}}
一切如原先一樣，只不過這次我們可以少寫一行冗余的代碼了。同時打開 devtool 可以發(fā)現(xiàn)，兩種狀態(tài)的組件會復用同一個 dom 節(jié)點，如下：
你可以通過下面的鏈接來看看這個組件的實現(xiàn)代碼以及演示：
sandbox: 在線演示
github: part-9
總結(jié)關(guān)于函數(shù)式組件，我是在 React 中第一次接觸，其形式和它的名字一樣，就是一個函數(shù)。這種組件和普通組件相比的優(yōu)勢主要在于，它是無狀態(tài)的，這意味著它的可測試性和可讀性更好，同時一些情況下，渲染開銷也更小。
我們在日常工作中，可能會經(jīng)常遇到動態(tài)渲染的需求，一般情況下，我們均會通過 v-if 來解決，在比較簡單的情況下，v-if 確實一種很簡單且高效的方式，但是隨著組件復雜度的上升，很可能會出現(xiàn)面條式的代碼，可讀性和可測試性都大打折扣，這是不妨換一個角度從渲染機制本身將組件重構(gòu)為更小的顆粒，并用一個函數(shù)式組件動態(tài)的代理它們，可能會得到更好的效果，舉一個比較常見的例子，比如表單系統(tǒng)中的表單項，一般都具有多種渲染狀態(tài)，如編輯狀態(tài)、瀏覽狀態(tài)、禁用狀態(tài)等等，這時利用該模式來抽離不同狀態(tài)的渲染邏輯就非常不錯。
目錄github gist
關(guān)注公眾號 全棧101，只談技術(shù)，不談人生
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/98814.html
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：并總結(jié)經(jīng)典面試題集各種算法和插件前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快速搭建項目。 本文是關(guān)注微信小程序的開發(fā)和面試問題，由基礎(chǔ)到困難循序漸進，適合面試和開發(fā)小程序。并總結(jié)vue React html css js 經(jīng)典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔，優(yōu)化項目，在瀏覽器端的層面上提升速度，幫助初中級前端工程師快...
摘要：它的文檔也是相當詳細，每個功能都配有詳細說明和實例代碼，直接復制就可以使用，我們也計劃在明年啟動英文文檔翻譯計劃。明年會啟動英文文檔翻譯計劃，也希望喜歡和支持，同時英語不錯的同學可以加入我們，一起參與翻譯。 前段時間在微軟參加活動，分享了 TalkingData 開源的基于 Vue.js 的高效 UI 組件庫 iView 的一些開發(fā)經(jīng)驗，現(xiàn)整理成文，和大家探討。 showImg(htt...
閱讀 3418·2021-11-25 09:43
閱讀 1386·2021-11-23 09:51
閱讀 3699·2021-10-11 11:06
閱讀 3871·2021-08-31 09:41
閱讀 3650·2019-08-30 15:53
閱讀 3582·2019-08-30 15:53
閱讀 1022·2019-08-30 15:43
閱讀 3402·2019-08-29 14:02
