+ 代理方式的高阶组件 返回的新组件直接继承自React.Component类，新组件扮演的角色传入参数组件的一个代理，在新组件的render函数中，将被包裹组建渲染出来，除了高阶组件自己要做的工作，其余功能全部转手给了被包裹的组建 ~~~ // 代理方式的高阶组件 const A = (title) => WrappedComponent => class A extends Component { _ref(instance) { instance.getName&&console.log(instance, instance.getName()) } render() { const { age, ...otherProps } = this.props return ( <div className="container"> {title} <div> <WrappedComponent sex={'男'} {...otherProps} ref={this._ref.bind(this)} /> </div> </div> ) } } export { A } ~~~ ~~~ // 共享高阶组件内的方法和 staate const A = (title) => WrappedComponent => class A extends Component { constructor(props) { super(props); this.state = { value: '' } } onInputChange = (e) => { this.setState({ value: e.target.value }) console.log(this.state.value) } _ref(instance) { instance.getName&&console.log(instance, instance.getName()) } render() { const { age, ...otherProps } = this.props const newProps = { value: this.state.value, onChange: this.onInputChange, } return ( <div className="container"> {title} <div> <WrappedComponent sex={'男'} {...otherProps} {...newProps} /> </div> </div> ) } } ~~~ + 继承方式的高阶组件 采用继承关联作为参数的组件和返回的组件，假如传入的组件参数是 WrappedComponent，那么 返回的组件就直接继承自WrappedComponent