高階 Vue 元件模式 9

到此為止，我們的toggle元件已經足夠強大以及好用了，因此這篇文章不會再為它增加新的特性。如果你是從第一篇文章一直讀到這裡的讀者，你一定會發現，整篇文章中，我幾乎沒有對toggle-on和toggle-off做出任何更改和重構，因此這篇文章著重來重構一下它們。

}
}

這裡兩行**的邏輯幾乎一模一樣，但我們卻要寫兩次。同時你還會發現乙個問題，由於其內部的渲染邏輯是通過v-if來描述的，實際上在 vue 渲染完成後，會渲染兩個dom節點，在切換時的狀態從 devtool 中觀察的效果大概是這樣子的：

未顯示的節點是乙個注釋節點，而顯示的節點是乙個 div 節點。

轉化為函式式元件

首先，先將已經存在的toggle-on和toggle-off元件轉化為函式式元件，很簡單，只需保留 template **塊即可，同時在左邊的標籤上宣告functional屬性，或者在 script **塊中宣告functional: true也是可以的。唯一要注意的是，由於函式式元件沒有 data 也沒有this，因此所有模板中用到的與 prop 相關的渲染邏輯，都要作出相應更改，比如原先的on要改為props.on的形式，由於這裡我們要移除v-if的渲染邏輯，因此直接移除即可，詳細**如下：

// toggleon.vue // toggleoff.vue

除此之外，還可以發現，我為兩個元件增加不同的顏色樣式以便於區分當前的開關狀態。

實現 togglestatus 元件

接下來實現今天的主角，togglestatus元件，由於我們的目標是將原先的二個函式式元件合二為一，因此這個元件本身應當也是乙個函式式元件，不過我們需要使用另外一種寫法，如下：

關於這種寫法中，render和createelement方法的引數就不贅述了，不熟悉的讀者請參考官方文件。可以發現，這裡將toggle-on和toggle-off以模組的形式匯入，之後由props.on的值進行判定，從而決定哪乙個被作為createelement方法的第乙個引數進行渲染。

諸如data和children引數我們原封不動的傳入createelement即可，因為這裡對於toggle-status元件的定位是乙個**元件，對於其他引數以及子元素應當原封不動的傳遞給被**的元件中。

// controlled toggle
}// uncontrolled toggle
}

一切如原先一樣，只不過這次我們可以少寫一行冗餘的**了。同時開啟 devtool 可以發現，兩種狀態的元件會復用同乙個 dom 節點，如下：

關於函式式元件，我是在 react 中第一次接觸，其形式和它的名字一樣，就是乙個函式。這種元件和普通元件相比的優勢主要在於，它是無狀態的，這意味著它的可測試性和可讀性更好，同時一些情況下，渲染開銷也更小。

我們在日常工作中，可能會經常遇到動態渲染的需求，一般情況下，我們均會通過v-if來解決，在比較簡單的情況下，v-if確實一種很簡單且高效的方式，但是隨著元件複雜度的上公升，很可能會出現麵條式的**，可讀性和可測試性都大打折扣，這是不妨換乙個角度從渲染機制本身將元件重構為更小的顆粒，並用乙個函式式元件動態的**它們，可能會得到更好的效果，舉乙個比較常見的例子，比如表單系統中的表單項，一般都具有多種渲染狀態，如編輯狀態、瀏覽狀態、禁用狀態等等，這時利用該模式來抽離不同狀態的渲染邏輯就非常不錯。

高階 Vue 元件模式 9

高階 vue 元件模式 6

高階 Vue 元件模式 3

高階 Vue 元件模式 1

高階 Vue 元件模式 9

高階 vue 元件模式 6

高階 Vue 元件模式 3

高階 Vue 元件模式 1

相關推薦