简单的理解react高阶组件(Higher-Order Components)
- 高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧
- 高阶组件的参数为一个组件返回一个新的组件
- 组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件
一个简单的列子
UserInfoHoc.js
import React,{ Component } from 'react';
const UserInfoHoc = ( WrappedComponent ) =>{// WrappedComponent指被包装的 React.Component
class UserInfo extends Component{ //类名可以省略,省略的话标签名就是以temp或者其他的代替,必须要有返回值
constructor(props) {
super(props);
this.state = {
username: '张三',
}
}
render () {
return (
<WrappedComponent username={this.state.username} />// 将参数当做一个组件返回出去
)
}
}
return UserInfo;
}
export default UserInfoHoc;
复制代码
PageA.js
import React,{ Component } from 'react';
import UserInfoHoc from './UserInfoHoc';
class PageA extends Component{
render () {
return (
<div>
<p> A页面 </p>
{ this.props.username } // 使用了高阶组件后,这里就可以直接使用了
</div>
)
}
}
export default UserInfoHoc(PageA); // 这样这个组件就有高阶组件内的属性
复制代码
高阶组件就是把username通过props传递给目标组件,目标组件只需要从props里面拿来用就可以
我们可以使用高阶组件来
- 代码重用,页面逻辑更简单,更易于维护
- 对state和props进行操作