iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 24
0
Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列 第 24

[Day24] React - Mixin

大綱

  • 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,協助渲染子元件 </body> 的結尾

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

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


上一篇
[Day23] React - 複合元件
下一篇
[Day25] React - DOM 的操作
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言