+ 代理方式的高階組件 返回的新組件直接繼承自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