React-高阶组件-应用场景

简介: 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;




官方文档



最后


本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
1月前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
346 123
|
27天前
|
移动开发 前端开发 UED
React 音频预览组件 Audio Preview
在现代Web开发中,React框架下的音频播放功能日益重要。本文介绍如何使用React创建交互式音频预览组件,涵盖基础构建、常见问题及解决方案。通过HTML5音频标签实现基本播放控制,使用状态管理增强功能。解决跨域资源共享(CORS)、格式兼容性、自动播放限制等问题,并探讨性能优化、样式定制、事件处理、移动端适配、错误处理、国际化支持及组件集成等关键点,帮助开发者提升组件稳定性和用户体验。
37 10
|
18天前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
81 58
|
18天前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
88 57
|
18天前
|
前端开发 开发者
除了函数组件和类组件,React 还有其他创建组件的方式吗?
除了函数组件和类组件,React 还有其他创建组件的方式吗?
80 57
|
18天前
|
前端开发
如何在React Router中定义404错误页面组件?
如何在React Router中定义404错误页面组件?
76 57
|
18天前
|
前端开发
在 React 中使用高阶组件时,如何避免命名冲突?
在 React 中使用高阶组件时,如何避免命名冲突?
81 56
|
2月前
|
存储 编解码 前端开发
React 视频上传组件 Video Upload
随着互联网的发展,视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件,涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式,实现文件选择、进度显示、格式验证等功能,并解决跨域请求、并发上传等易错点。提供完整代码案例,确保用户能顺畅上传视频。
146 92
|
11天前
|
移动开发 前端开发 JavaScript
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
76 30
|
8天前
|
编解码 前端开发 开发者
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
38 22