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中添加组件所需的通用功能，并在需要时使用它。
它允许代码重用，并仅使单个任务保持组件清洁。
热门推荐
10 领证幽默祝福语简短
11 生日牌祝福语英语简短
12 给表弟的祝福语简短
13 送蛇的祝福语简短
14 周末思念祝福语大全简短
15 婆婆生日祝福语简短的
16 祖国七十华诞简短祝福语
17 高考前祝福语简短字句
18 团队文案祝福语简短励志