数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究React.js 中的高阶组件
高阶组件，简称 hoc。它是一种模式，接收一个组件并返回一个新的组件，并在其上添加附加功能。
//hoc 是一个自定义 JavaScript 函数的名称
const AddOnComponent= hoc(SimpleComponent);
我们使用带有状态和/或 props 的组件来构建 UI。类似地，hoc 从提供的组件构建一个新的组件。
hoc 的用途是在 React 中进行横切关注点。组件将负责单个任务的单个职责，而 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>
}
}
}
}export default userSpecificMessage(UserWelcome)
在 UserWelcome 中，我们只是向父组件 App.js 传递的用户显示消息。
UserComponent 被 hoc userSpecificMessage 包裹，后者从被包裹的组件即 UserComponent 接收 props。
hoc userSpecificMessage 根据用户类型决定显示哪个消息。
如果用户类型是客户，则按原样显示消息。但如果用户不是客户，则默认显示欢迎管理员消息。
通过这种方式，我们可以在 hoc 中添加组件所需的功能，并在需要时使用它。
它允许代码重用，并使组件仅专注于各自的任务。
更新于: 2019-09-05
164 次浏览
广告