mixin的高階組件使用詳解
- php中世界最好的语言原創
- 2018-03-23 13:23:042438瀏覽
這篇文章主要介紹了淺談React中組件間抽象,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
關於今天要學習的組件間抽像其實我這小白看了幾次還沒弄清楚，這次決定一探究竟。在元件建構中，通常有一類功能需要被不同的元件公用，此時就涉及抽象的概念，在React中我們主要了解mixin和高階元件。
mixin
mixin的特性廣泛存在於各個物件導向語言中，在ruby中，include關鍵字就是mixin，是將一個模組混入到另一個模組中，或者是類別中。
封裝mixin方法
const mixin = function(obj, mixins) {
const newObj = obj
newObj.prototype = Object.create(obj.prototype)
for(let props in mixins) {
newObj.prototype[props] = mixins[props]
}
return newObj
}
const BigMixin = {
fly: () => {
console.log('i can fly')
}
}
const Big = function() {
console.log('new big')
}
const FlyBig = mixin(Big , BigMixin)
const flyBig = new FlyBig()
FlyBig.fly() //'i can fly'
對於廣義的mixin方法，就是用賦值的方式將mixin物件裡的方法都掛載到原物件上去，來實現對物件的混入。
React中的mixin
React在使用createClass建置元件時提供了mixin屬性，如官方的PureRenderMixin：
import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
React.createClass({
mixins: [PureRenderMixin]
render() {
return <p>foo</foo>
}
})
在createClass物件參數中傳入數組mixins，裡面封裝了我們所需要的模組，mixins數組也可以增加多個mixin，其每一個mixin方法之間的有重合，對於普通方法和生命週期方法是有所區分的。
在不同的mixin裡實作兩個名字一樣的普通方法，在React中是不會被覆蓋的，會在控制台中報一個ReactClassInterface裡的錯誤，指出你嘗試在組件中多次定義一個方法。 **因此在React中是不允許出現崇明普通方法的mixins，如果是React生命週期定義的方法，則會將各個模組的生命週期方法疊加在一起順序執行**。
我們看到使用createClass的mixin為群組價做了兩件事：
1. 工具方法：為元件共享了一些工具類別方法，可以在各個元件中使用。
2. 生命週期繼承：props和state合併，mixin能夠合併生命週期方法，如果有很多mixin來定義componentDidMount這個週期，
那麼React會非常聰明的將他們合併一起執行。
ES6 CLASS和decorator
現在我們比較推崇使用es6 class方法去建構元件，但它不支援mixin。官方文件中也沒有給出很好的方法。
decorator是ES 7 中定義的特性，和Java中的註解相似。 decorator是運用在運行時的方法，在redux或其他應用層框架中，越來越多的使用decorator實現對組件的裝飾。
core-decorator函式庫為開發者提供了一些實用的decorator，其中實作了我們正想要的@mixin。它將每個mixin物件的方法都疊加到target物件的原型上以達到mixin的目的。
import React, { Component } from 'react'
import { mixin } from 'core-decorator'
const PuerRender = {
setTheme()
}
const Them = {
setTheme()
}
@mixin(PuerRender, Them)
class MyComponent extends Component {
render() {...}
}
如上decorator只是作用在類別上面的，還有作用在方法上面的，它可以控制方法的自有屬性。
注意：react 0.14開始剝離mixin
#mixin的問題
破壞了原有元件的封裝
方法可以混入方法為元件帶來新的特性，也會帶來新的props和state，這意味著有些不可見的狀態需要我們去維護。 mixin也有可能有相互依賴，這樣形式依賴鏈，彼此之間會影響。
命名衝突
增加複雜性
相信看了這篇文章案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是mixin的高階組件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！