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由hoc userSpecificMessage包装，后者从包装的组件即UserComponent接收道具

特殊的userSpecificMessage根据用户类型决定要显示的消息。

如果用户的类型是客户，则按原样显示消息。但是，如果用户不是客户，则默认情况下会显示“欢迎管理员”消息。

通过这种方式，我们可以在hoc中添加组件所需的通用功能，并在需要时使用它。

它允许代码重用，并仅使单个任务保持组件清洁。