淺談React中組件間抽象

關(guān)于今天要學(xué)習(xí)的組件間抽象其實(shí)我這小白看了幾次還沒(méi)弄明白，這次決定一探究竟。在組件構(gòu)建中，通常有一類(lèi)功能需要被不同的組件公用，此時(shí)就涉及抽象的概念，在React中我們主要了解mixin和高階組件。

mixin

mixin的特性廣泛存在于各個(gè)面向?qū)ο笳Z(yǔ)言中，在ruby中，include關(guān)鍵詞就是mixin，是將一個(gè)模塊混入到另外一個(gè)模塊中，或者是類(lèi)中。

封裝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'

對(duì)于廣義的mixin方法，就是用賦值的方式將mixin對(duì)象里的方法都掛載到原對(duì)象上去，來(lái)實(shí)現(xiàn)對(duì)對(duì)象的混入。

React中的mixin

React在使用createClass構(gòu)建組件時(shí)提供了mixin屬性，如官方的PureRenderMixin：

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
React.createClass({
  mixins: [PureRenderMixin]
  
  render() {
    return <div>foo</foo>
  }
})

在createClass對(duì)象參數(shù)中傳入數(shù)組mixins，里面封裝了我們所需要的模塊，mixins數(shù)組也可以增加多個(gè)mixin，其每一個(gè)mixin方法之間的有重合，對(duì)于普通方法和生命周期方法是有所區(qū)分的。

在不同的mixin里實(shí)現(xiàn)兩個(gè)名字一樣的普通方法，在React中是不會(huì)被覆蓋的，會(huì)在控制臺(tái)中報(bào)一個(gè)ReactClassInterface里的錯(cuò)誤，指出你嘗試在組件中多次定義一個(gè)方法。**因此在React中是不允許出現(xiàn)崇明普通方法的mixins，如果是React生命周期定義的方法，則會(huì)將各個(gè)模塊的生命周期方法疊加在一起順序執(zhí)行**。

我們看到使用createClass的mixin為組價(jià)做了兩件事情：

1. 工具方法：為組件共享了一些工具類(lèi)方法，可以在各個(gè)組件中使用。

2. 生命周期繼承：props和state合并，mixin能夠合并生命周期方法，如果有很多mixin來(lái)定義componentDidMount這個(gè)周期，

那么React會(huì)非常智能的將他們合并一起執(zhí)行。

ES6 CLASS和decorator

現(xiàn)在我們比較推崇使用es6 class方法去構(gòu)建組件，但是它并不支持mixin。官方文檔中也沒(méi)有給出很好的辦法。

decorator是ES 7 中定義的特性，和Java中的注解相似。decorator是運(yùn)用在運(yùn)行時(shí)的方法，在redux或者其他應(yīng)用層框架中，越來(lái)越多的使用decorator實(shí)現(xiàn)對(duì)組件的裝飾。

core-decorator庫(kù)為開(kāi)發(fā)者提供了一些實(shí)用的decorator，其中實(shí)現(xiàn)了我們正想要的@mixin。它將每個(gè)mixin對(duì)象的方法都疊加到target對(duì)象的原型上以達(dá)到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只是作用在類(lèi)上面的，還有作用在方法上面的，它可以控制方法的自有屬性。

注意：react 0.14開(kāi)始剝離mixin

mixin的問(wèn)題

破壞了原有組件的封裝

mixin方法可以混入方法給組件帶來(lái)新的特性，也會(huì)帶來(lái)新的props和state，這意味著有些不可見(jiàn)的狀態(tài)需要我們?nèi)ゾS護(hù)。mixin也有可能存在相互依賴，這樣形式依賴鏈，相互之間會(huì)影響。

1. 命名沖突
2. 增加復(fù)雜性

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。