这问题真的是土到我了,立刻就发了一个知乎想法。但后来我发现,他会不会想问的是几百年前,在盘古开天辟地之后的react 0.x
时代,于是我默默把想法干掉了。
如果是createClass
和extends React.Component
,还有点意思。如果是functional component
,那您怎么不用同样很「渐进式」同时又更牛逼的vue
呢?
简单对比:
createClass | Component/PureComponent |
---|---|
ES5 | ES6 |
propTypes/getDefaultProp | Component.defaultProps/Component.propType |
this 已被指定 | 属性 this 不默认指向组件(实例) |
mixin | mixin(被取消,不建议,做不到,HOC) |
其中对我来说,这两个的区别可能mixin
最有意思
编写风格
createClass
用的是给函数传递一个对象的方式创建组件,风格很像vue
,Component
用的是对象继承的方式创建组件。好像没什么好说的。
default props
createClass
依然跟现在的vue
写法很像,不过从vue
中props[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
方法将不能被使用。