高阶组件
高阶组件是 React
中对组件逻辑进行重用的高级技术,但是在这里我们还是希望大家谨慎使用高阶组件。
现阶段,我们只支持一种形式的高阶组件,就是在原组件上扩展属性,如下所示:
function Hoc (WrappComponent) {
return class Inner extends React.HocComponnet{ // 继承HocComponnet
componentDidMount() {
}
shouldComponentUpdate() {
}
render() {
return React.createElement(
WrappComponent,
{
...this.props,
...this.otherProps // 扩展其他属性
}
)
}
}
}
这里有几点需要注意:
- 类必须继承
React.HocComponent
,HocComponent
只存在与微信小程序平台 - 不允许使用
JSX
语法, 创建元素使用React.createElement
由于以上的限制存在,通常情况下对于 Hoc.js 这个高阶组件, 需要存在两个文件 Hoc.js 用于 RN, Hoc.wx.js 用于小程序
可以参考样例HelloWorldExpo 中Hoc 的使用