浅谈React中组件间抽象
关于今天要学习的组件间抽象其实我这小白看了几次还没弄明白，这次决定一探究竟。在组件构建中，通常有一类功能需要被不同的组件公用，此时就涉及抽象的概念，在React中我们主要了解mixin和高阶组件。
mixin
mixin的特性广泛存在于各个面向对象语言中，在ruby中，include关键词就是mixin，是将一个模块混入到另外一个模块中，或者是类中。
封装mixin方法
constmixin=function(obj,mixins){
constnewObj=obj
newObj.prototype=Object.create(obj.prototype)
for(letpropsinmixins){
newObj.prototype[props]=mixins[props]
}
returnnewObj
}
constBigMixin={
fly:()=>{
console.log('icanfly')
}
}
constBig=function(){
console.log('newbig')
}
constFlyBig=mixin(Big,BigMixin)
constflyBig=newFlyBig()
FlyBig.fly()//'icanfly'
对于广义的mixin方法，就是用赋值的方式将mixin对象里的方法都挂载到原对象上去，来实现对对象的混入。
React中的mixin
React在使用createClass构建组件时提供了mixin属性，如官方的PureRenderMixin：
importReactfrom'react'
importPureRenderMixinfrom'react-addons-pure-render-mixin'
React.createClass({
mixins:[PureRenderMixin]
render(){
returnfoo
}
})
在createClass对象参数中传入数组mixins，里面封装了我们所需要的模块，mixins数组也可以增加多个mixin，其每一个mixin方法之间的有重合，对于普通方法和生命周期方法是有所区分的。
在不同的mixin里实现两个名字一样的普通方法，在React中是不会被覆盖的，会在控制台中报一个ReactClassInterface里的错误，指出你尝试在组件中多次定义一个方法。**因此在React中是不允许出现崇明普通方法的mixins，如果是React生命周期定义的方法，则会将各个模块的生命周期方法叠加在一起顺序执行**。
我们看到使用createClass的mixin为组价做了两件事情：
1.工具方法：为组件共享了一些工具类方法，可以在各个组件中使用。
2.生命周期继承：props和state合并，mixin能够合并生命周期方法，如果有很多mixin来定义componentDidMount这个周期，
那么React会非常智能的将他们合并一起执行。
ES6CLASS和decorator
现在我们比较推崇使用es6class方法去构建组件，但是它并不支持mixin。官方文档中也没有给出很好的办法。
decorator是ES7中定义的特性，和Java中的注解相似。decorator是运用在运行时的方法，在redux或者其他应用层框架中，越来越多的使用decorator实现对组件的装饰。
core-decorator库为开发者提供了一些实用的decorator，其中实现了我们正想要的@mixin。它将每个mixin对象的方法都叠加到target对象的原型上以达到mixin的目的。
importReact,{Component}from'react'
import{mixin}from'core-decorator'
constPuerRender={
setTheme()
}
constThem={
setTheme()
}
@mixin(PuerRender,Them)
classMyComponentextendsComponent{
render(){...}
}
如上decorator只是作用在类上面的，还有作用在方法上面的，它可以控制方法的自有属性。
注意：react0.14开始剥离mixin
mixin的问题
破坏了原有组件的封装
mixin方法可以混入方法给组件带来新的特性，也会带来新的props和state，这意味着有些不可见的状态需要我们去维护。mixin也有可能存在相互依赖，这样形式依赖链，相互之间会影响。
- 命名冲突
- 增加复杂性
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。