这问题真的是土到我了,立刻就发了一个知乎想法。但后来我发现,他会不会想问的是几百年前,在盘古开天辟地之后的react 0.x时代,于是我默默把想法干掉了。

如果是createClassextends React.Component,还有点意思。如果是functional component,那您怎么不用同样很「渐进式」同时又更牛逼的vue呢?

简单对比:

createClassComponent/PureComponent
ES5ES6
propTypes/getDefaultPropComponent.defaultProps/Component.propType
this 已被指定属性 this 不默认指向组件(实例)
mixinmixin(被取消,不建议,做不到,HOC)

其中对我来说,这两个的区别可能mixin最有意思

编写风格

createClass 用的是给函数传递一个对象的方式创建组件,风格很像vueComponent用的是对象继承的方式创建组件。好像没什么好说的。

default props

createClass依然跟现在的vue写法很像,不过从vueprops[xxx].default变成getDefaultProp方法,同时对象内通过propTypes做接口类型检查。

classes型的默认接口和接口检查都是来源于对象两个静态对象。

this

createClass同样与vue差不多,this会指向到组件上,应该还是处于同一对象中的原因。classes类型的可没那么顺利,this会指向到类上,所以写react的时候,方法难免还要在构造函数中bind一次,当然如果方法是箭头函数的话麻烦少很多。

mixin

createClass依然与vue的差不多(vue抄得妙啊),遗憾classes不支持mixin了。

我也不喜欢mixin,也觉得这东西不适合react的理念。mixin是把一个对象的内容与另一个对象的内容合并,看起来复用性利用率很高(别bb抽就完事儿了嗷),但,同名函数怎么办?改动怎么办?东西一多就沉浸在不断重写与复读,造成副作用,牵一发而动全身的情况。

高阶函数多好,编写一个可复用函数,把计划使用复用内容的函数或对象以参数形式传入,在使用组件或者函数的同时又把复用内容执行完。首先HOC可以想象成是「悠米」——它挂在你身上,加盾,加速,加血,加自适应。它挂在谁身上都一样,不受干扰。

只要我的队友还活着,我就不会遭受苦难 —— 悠米

而每次经过高阶函数之后又是一个新的函数,每个新函数相对独立,不存在副作用。

HOC写起来还是有两种,以react返回Component来说,返回的对象又会有两种。

  • 返回的Component继承于全新的React.Component(react-redux:connect)
  • 返回的Component继承于参数的Component(反向继承)(reabit:inject)

第一种最后的结果是render时以组件的形式调用参数,第二种则是通过super在各种地方执行(整个方法执行直接在构造函数执行super([传入适用原组件props])),各有利弊。

而因为反向继承的关系,我可以获得组件很多内容,所以某种意义上可以当做mixin使用。

不过毕竟HOC,有一个问题:原组件如果存在static方法将不能被使用。