iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
自我挑戰組

為自己而寫,前端工程師之 30 天心得分享系列 第 21

[Day - 21] React 學習筆記 (六)

大綱

  • Mixin 是什麼 ?

Mixin 是什麼 ?

在本人學習 Ruby on Rails 的過程中,就有學習到要避免 DRY,也就是別寫重複的程式碼,哪在 React 的世界裡,又有什麼類似的呢 ?

答案是有的,就是本篇要介紹的 Mixin。React Mixin 是在 React 提出可重用組件邏輯的高級設計方式時加入的。利用 Mixin 可以將 React 組件中的邏輯提取出來作為獨立的對象使用。在使用 Mixin 對象時,Mixin 中的所有功能都會被引入到組件中。

Mixin 是相當容易學的。它們是混入元件類別的物件。React 更進一步了來避免不小心複寫了函式,並且允許多個 mixin,而在這個情況下,要特別注意會不會有衝突的發生。

由 component 開頭的生命週期方法,像是 componentDidMount,這方法會按照 mixin 陣列中的順序呼叫,最後是元件類別中的 componentDidMount,前提是有使用這個方法的話。

另外,底下列了幾點值得我們注意的:

  • Mixin 它可以監聽事件,並使用到狀態中 (例如 flux 的儲存 mixin)
  • Mixin 可以處理 XHR 上傳,並把上傳狀態和進度用於元件狀態
  • 層 (layer) mixin,協助渲染子元件 的結尾

不過,現代React應用程式已經不再使用Mixin了,因為它們會帶來一些負面作用。

取而代之的是,React 高階組件(Higher-Order Components,簡稱 HOC)是一種 React 的高級設計模式,是替代Mixin的另一種在組件間復用邏輯的方法。哪這個部分就不在這次的討論範圍內,讓各位知道有這個設計模式。


上一篇
[Day - 20] React 學習筆記 (五)
下一篇
[Day - 22] React 學習筆記 (七)
系列文
為自己而寫,前端工程師之 30 天心得分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言