大綱

• 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的另一種在組件間復用邏輯的方法。哪這個部分就不在這次的討論範圍內，讓各位知道有這個設計模式。