高阶组件本质是函数,参数是 组件1 返回组件2,高阶组件是为了复用通用逻辑
高阶组件eg:
import React, { Component } from 'react';
const withPersistentData = data => WrappedComponent => {
return class extends Component {
constructor(props) {
super(props);
}
render() {
return (
<WrappedComponent data={data} />
)
}
}
}
export default withPersistentData
尝试用定义好的高阶组件
import React, { Component } from 'react';
import HighComponent from './HighComponent';
class LowComponent extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>{this.props.data}</div>
)
}
}
const MyComponent = HighComponent('Hello')(LowComponent)
export default MyComponent