react 高阶组件 hoc动手写

先写一个react-redux

export default connect()(App)

@connect()        //这里用的是装饰器
	export class App extends React.Component{
			render(){}
	}

export const myHoc=()=>{
			return (Wrapped)=>{
					class Hoc extends React.Component{
						render (){
								return <Wrapped {...this.props}>
								}
					}
					return Hoc
			}
}

高阶组件就是函数里隐藏 一个react组件，参数Wrapped就是被装饰的组件

@myHoc()
export class App extends React.Compoent{
		return (){}
}

推论可以改写为

export default myHoc()(app)

所以用来高阶组件后，返回的是一个高阶。

增加props属性

export const myHoc=()=>{
	return (Warpped)=>{
		class Hoc extends React.Component{
			render (){
				return <Wrapped {...this.props} whoAmI="tiutiu">
			}
		}
		return Hoc
	}
}

@myHoc()
export class App extends React.Component{
	render(){
		return <div>{this.props.whoAmI}</div>
	}
}

多个高阶组件

@myHoc()
@yourHoc()
@hisHoc()
@herHoc()
export class App extends React.Componnt{
	render(){
		return <div>{this.props.whoAmI}</div>
	}
}

上面是装饰器的写法。简介，写起来快

可以带参数

@myHoc('tiuitiu2号')
export class App extends React.Component{
	render(){
		return <div>{this.props.whoAmI}</div>
	}
}

export const myHoc=(name)=>{
	return (Warpped)=>{
		class Hoc extends React.Component{
			render(){
				return <Wrapped {...this.props} whoAmI={name}>
			
			}
		}
		return Hoc;
	}
}

这样就可以接收到tiutiu2号了

不带参数
可以少些一层回调来写不带参数的高阶组件

操控原组件
可能需要拿到被装饰组件的state数据或者执行它的方法，那么，要建立一个引用。

当项目中多次用到某个逻辑方法，但是这个方法无法放进util的时候，可以用Hoc。 Hoc最好只做一件事，那样维护方便。