React-高阶组件-应用场景
原创
前言
React高阶组件（Higher-Order Components，HOCs）是一种强大的模式，用于在React应用中复用组件逻辑。它们可以用于各种应用场景，包括但不限于以下几个：
代码复用：HOCs允许你将通用的组件逻辑抽取出来，以便在多个组件之间共享。这样可以减少重复代码的数量，提高代码的可维护性。
状态管理：你可以使用HOCs来处理全局状态管理或组件之间的状态逻辑。例如，使用Redux或Mobx管理应用的状态，然后将状态注入到组件中。
权限控制：HOCs可以用于控制组件的访问权限。你可以创建一个HOC，检查用户是否有足够的权限来查看特定的组件或页面。
数据获取：HOCs可以用于处理数据的获取和传递。你可以创建一个HOC，负责从API或其他数据源获取数据，并将数据传递给包装的组件。
性能优化：HOCs还可以用于性能优化。通过将常用的逻辑提取到HOC中，可以避免不必要的渲染或数据获取，提高应用程序的性能。
日志和错误处理：你可以使用HOCs来添加日志记录或错误处理逻辑，以便更轻松地调试和监视应用程序。
下面将介绍几个常用的
代码复用
import React from 'react';
const UserContext = React.createContext({});
const {Provider, Consumer} = UserContext;
class Son1 extends React.PureComponent {
render() {
return (
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
</div>
)
}
}
class Son2 extends React.PureComponent {
render() {
return (
<ul>
<li>{this.props.name}</li>
<li>{this.props.age}</li>
</ul>
)
}
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
return (
<Provider value={{name: 'yangbuyiya', age: 18}}>
<Father1/>
<Father2/>
</Provider>
)
}
}
function EnhancedComponent(WrappedComponent) {
class component extends React.PureComponent {
render() {
return (
<Consumer>{
value => {
return (
<WrappedComponent name={value.name} age={value.age}/>
)
}
}</Consumer>
)
}
}
return component;
}
export default App;增强 Props
import React from 'react';
const UserContext = React.createContext({});
const {Provider, Consumer} = UserContext;
class Son1 extends React.PureComponent {
render() {
return (
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
<p>{this.props.country}</p>
</div>
)
}
}
class Son2 extends React.PureComponent {
render() {
return (
<ul>
<li>{this.props.name}</li>
<li>{this.props.age}</li>
<li>{this.props.country}</li>
</ul>
)
}
}
function EnhancedComponent(WrappedComponent) {
return class Component extends React.PureComponent {
render() {
return (
<Consumer>{
value => {
return (
<WrappedComponent {...value} {...this.props}/>
)
}
}</Consumer>
)
}
}
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent {
render() {
return (
<Provider value={{name: 'zs', age: 18}}>
<Father1 country={'中国'}/>
<Father2 country={'俄罗斯'}/>
</Provider>
)
}
}
export default App;抽离 State / 生命周期拦截
import React from 'react';
import {EventEmitter} from 'events';
const UserContext = React.createContext({});
const {Provider, Consumer} = UserContext;
const eventBus = new EventEmitter();
class Son1 extends React.PureComponent {
render() {
return (
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
<p>{this.props.country}</p>
{
this.props.list.map(name => {
return <p key={name}>{name}</p>
})
}
</div>
)
}
}
class Son2 extends React.PureComponent {
render() {
return (
<ul>
<li>{this.props.name}</li>
<li>{this.props.age}</li>
<li>{this.props.country}</li>
{
this.props.list.map(name => {
return <li key={name}>{name}</li>
})
}
</ul>
)
}
}
function EnhancedComponent(WrappedComponent) {
return class Component extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
list: []
}
}
componentDidMount() {
eventBus.addListener('update', this.update.bind(this));
}
componentWillUnmount() {
eventBus.removeListener('update', this.update.bind(this));
}
update(list) {
this.setState({
list: list
});
}
render() {
return (
<Consumer>{
value => {
return (
<WrappedComponent {...value} {...this.props} {...this.state}/>
)
}
}</Consumer>
)
}
}
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent {
render() {
return (
<Provider value={{name: 'zs', age: 18}}>
<Father1 country={'中国'}/>
<Father2 country={'俄罗斯'}/>
<button onClick={() => {
this.btnClick()
}}>按钮
</button>
</Provider>
)
}
btnClick() {
eventBus.emit('update', ['鲁班', '虞姬', '黄忠']);
}
}
export default App;权限控制
import React from 'react';
class Info extends React.PureComponent {
render() {
return (
<div>用户信息</div>
)
}
}
class Login extends React.PureComponent {
render() {
return (
<div>用户登录</div>
)
}
}
function EnhancedComponent(WrappedComponent) {
return class Authority extends React.PureComponent {
render() {
if (this.props.isLogin) {
return <WrappedComponent/>
} else {
return <Login/>
}
}
}
}
const AuthorityInfo = EnhancedComponent(Info);
class App extends React.PureComponent {
render() {
return (
<AuthorityInfo isLogin={false}/>
)
}
}
export default App;官方文档
输入图片说明
最后
本期结束咱们下次再见👋~
🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗
输入图片说明
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
