React.js 中的高阶组件

react jsjavascript libraryfront end technology更新于 2025/11/7 2:52:17

高阶组件简称 hoc。它是一种接收一个组件并返回一个包含附加功能的新组件的模式。

//hoc 是一个自定义 JavaScript 函数的名称

const AddOnComponent= hoc(SimpleComponent);

我们使用带有 state 和/或 props 的组件来构建 UI。类似地，hoc 会根据提供的组件构建一个新组件。

在 React 中使用 hoc 可以创建横切关注点。组件负责单个任务的职责，而 hoc 函数则负责横切关注点。

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>
         }
      }
   }
}