React.js中的高阶组件
高阶部分简称为hoc。这是一种接收组件并返回具有附加功能的新组件的模式。
//hoc是自定义JavaScript函数的名称
const AddOnComponent= hoc(SimpleComponent);
我们使用带有状态和/或道具的组件来构建UI。hoc用类似的方法从提供的组件中构建一个新组件。
使用hoc在React中成为一个横切关注点。这些组件将负责单个任务的个人责任，而特殊功能将解决交叉问题。
redux的Connect功能是hoc的一个示例。
hoc的一个实际例子
根据用户类型向客户或管理员显示欢迎消息。
Class App extends React.Component{
render(){
return (
<UserWelcome message={this.props.message} userType={this.props.userType} />
);
}
}
Class UserWelcome extends React.Component{
render(){
return(
<div>Welcome {this.props.message}</div>
);
}
}
const userSpecificMessage=(WrappedComponent)=>{
return class extends React.Component{
render(){
if(this.props.userType==’customer’){
return(
<WrappedComponent {…this.props}/>
);
} else {
<div> Welcome Admin </div>
}
}
}
}导出默认的userSpecificMessage(UserWelcome)
在UserWelcome中，我们只是向父组件App.js传递给用户的消息显示。
UserComponent由hocuserSpecificMessage包装，后者从包装的组件即UserComponent接收道具
特殊的userSpecificMessage根据用户类型决定要显示的消息。
如果用户的类型是客户，则按原样显示消息。但是，如果用户不是客户，则默认情况下会显示“欢迎管理员”消息。
通过这种方式，我们可以在hoc中添加组件所需的通用功能，并在需要时使用它。
它允许代码重用，并仅使单个任务保持组件清洁。