AI 助理
备案控制台
开发者社区 安全 文章 正文

React高阶组件(Higher-Order Components)及其应用

2023-06-12 103
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： React高阶组件(Higher-Order Components)及其应用
1. 什么是高阶组件

import React from 'react';
class Home extends React.PureComponent{
    render(){
        return (
            <div>Home</div>
        )
    }
}
function enhanceComponent(WrappedComponent) {
    class AdvComponent extends React.PureComponent{
        render() {
            return (
                <div>
                    <WrappedComponent/>
                </div>
            )
        }
    }
    return AdvComponent;
}
const AdvComponent = enhanceComponent(Home);
class App extends React.PureComponent{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <div>
                <AdvComponent/>
            </div>
        )
    }
}
export default App;
高阶组件的应用场景

应用场景一：减少冗余代码

如果按照上面那种思路，则下面的father的代码特别冗余

import React from 'react';
const UserContext = React.createContext({});
const {Provider, Consumer} = UserContext;
class Father1 extends React.PureComponent{
    render() {
        return (
            <div>
                <Son1/>
            </div>
        )
    }
}
class Father2 extends React.PureComponent{
    render() {
        return (
            <div>
                <Son2/>
            </div>
        )
    }
}
class Son1 extends React.PureComponent{
    render() {
        return (
            <Consumer>{
                value =>{
                    return (
                        <div>
                            <p>{value.name}</p>
                            <p>{value.age}</p>
                        </div>
                    )
                }
            }</Consumer>
        )
    }
}
class Son2 extends React.PureComponent{
    render() {
        return (
            <Consumer>{
                value =>{
                    return (
                        <ul>
                            <li>{value.name}</li>
                            <li>{value.age}</li>
                        </ul>
                    )
                }
            }</Consumer>
        )
    }
}
class App extends React.PureComponent{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <Provider value={{name:'zs', age:18}}>
                <Father1/>
                <Father2/>
            </Provider>
        )
    }
}
export default App;

https://zh-hans.reactjs.org/docs/higher-order-components.html#gatsby-focus-wrapper

网络异常，图片无法展示
|

结构.png


怎么通过高阶组件进行改进呢？

因为father的代码其实非常相似，故可以考虑高阶组件通过函数构造

function EnhancedComponent (WrappedComponent) {
    class Father extends React.PureComponent{
        render() {
            return (
                <Consumer>{
                    value =>{
                        return (
                            <WrappedComponent name={value.name} age={value.age}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
    return Father;
}

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>
        )
    }
}
function EnhancedComponent (WrappedComponent) {
    class Father extends React.PureComponent{
        render() {
            return (
                <Consumer>{
                    value =>{
                        return (
                            <WrappedComponent name={value.name} age={value.age}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
    return Father;
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <Provider value={{name:'zs', age:18}}>
                <Father1/>
                <Father2/>
            </Provider>
        )
    }
}
export default App;

上面的代码在子组件接收父组件相同的数据时其实可以简化写法为下面

<WrappedComponent {...value} />
<!-- 相当于<WrappedComponent name={value.name} age={value.age}/>-->
应用场景二：增强Props

但是通过应用一减少代码时只是解决了接收相同数据导致的代码冗余问题，但是此时又有问题是：如果两个组件传递的是不同的数据该怎么办呢？

这时需要分别通过Father组件分别传值，再通过子组件的props接收

此时代码优化为入下：

<Provider value={{name:'zs', age:18}}>
                <Father1 country={'中国'}/>
                <Father2 country={'俄罗斯'}/>
            </Provider>

function EnhancedComponent (WrappedComponent) {
    class Father extends React.PureComponent{
        render() {
            return (
                <Consumer>{
                    value =>{
                        return (
                            /*
                            <WrappedComponent name={value.name} age={value.age}/>
                            */
                            <WrappedComponent {...value} {...this.props}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
    return Father;
}

完整代码：

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) {
    class Father extends React.PureComponent{
        render() {
            return (
                <Consumer>{
                    value =>{
                        return (
                            <WrappedComponent {...value} {...this.props}/>
                        )
                    }
                }</Consumer>
            )
        }
    }
    return Father;
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent{
    constructor(props){
        super(props);
    }
    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) {
    class Father 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>
            )
        }
    }
    return Father;
}
const Father1 = EnhancedComponent(Son1);
const Father2 = EnhancedComponent(Son2);
class App extends React.PureComponent{
    constructor(props){
        super(props);
    }
    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) {
    class Authority extends React.PureComponent{
        render() {
            if(this.props.isLogin){
                return <Info/>
            }else{
                return <Login/>
            }
        }
    }
    return Authority;
}
const AuthorityInfo = EnhancedComponent(Info);
class App extends React.PureComponent{
    constructor(props){
        super(props);
    }
    render(){
        return (
            <AuthorityInfo isLogin={true}/>
            //<AuthorityInfo isLogin={false}/>
        )
    }
}
export default App;


文章标签：
前端开发
数据安全/隐私保护
关键词：
React Native组件应用
React Native higher-order
React Native高阶
react.js应用
react.js组件
YiYa_咿呀
目录
相关文章
夏天49597
|
1天前
|
移动开发 前端开发 JavaScript
React 视频播放控制组件 Video Controls
本文深入探讨了如何使用React创建功能丰富的视频播放控制组件（Video Controls）。首先介绍了React与HTML5 `&lt;video&gt;` 标签的基础知识，展示了如何通过状态管理和事件处理实现自定义控件。接着分析了常见问题如视频加载失败、控件样式不一致、状态管理混乱和性能问题，并提供了相应的解决方案。最后通过完整代码案例详细解释了播放、暂停、进度条和音量控制的实现方法，帮助开发者在React中构建高质量的视频播放组件。
夏天49597
36 17
夏天49597
|
6天前
|
移动开发 前端开发 UED
React 音频预览组件：Audio Preview
本文介绍如何使用 React 构建音频预览组件，涵盖基础实现、常见问题及解决方案。通过 HTML5 `&lt;audio&gt;` 标签和 React 状态管理，实现播放控制。解决文件路径、浏览器兼容性等问题，并优化性能，避免状态不同步和内存泄漏，提升用户体验。
夏天49597
54 22
夏天49597
|
8天前
|
移动开发 前端开发 UED
React 音频播放器组件 Audio Player
本文介绍如何使用React创建功能丰富的音频播放器组件。基于HTML5 `&lt;audio&gt;` 标签，结合React的状态管理和事件处理，实现播放、暂停、进度和音量控制等功能。通过代码示例展示基本实现，并探讨常见问题如自动播放限制、进度条不更新、文件加载失败及多实例冲突的解决方案。同时，避免易错点如忽略生命周期管理、错误处理和性能优化，确保高效开发与良好用户体验。
夏天49597
62 23
夏天49597
|
10天前
|
缓存 前端开发 JavaScript
React 视频弹幕组件 Video Danmaku
本文介绍了如何在React中构建视频弹幕组件，提升用户观看体验和互动性。首先通过Create React App初始化项目，并集成`react-player`作为视频播放器。接着实现基本弹幕功能，包括评论的接收与显示，使用CSS动画实现滚动效果。针对常见问题如弹幕重叠、性能下降及同步问题，提供了随机化位置、分批加载和监听播放进度等解决方案。最后探讨了弹幕分类和特效等高级技巧，确保弹幕系统的高性能和良好用户体验。
夏天49597
52 23
夏天49597
|
11天前
|
移动开发 前端开发 JavaScript
React 视频播放控制组件 Video Controls
本文介绍了如何使用 React 构建视频播放控制组件（Video Controls），涵盖基本概念、创建步骤和常见问题解决。首先，通过 HTML5 `&lt;video&gt;` 标签和 React 组件化思想，实现播放/暂停按钮和进度条等基础功能。接着，详细讲解了初始化项目、构建 `VideoControls` 组件及与主应用的集成方法。最后，针对视频无法播放、控制器状态不同步、进度条卡顿和音量控制失效等问题提供了具体解决方案，并介绍了全屏播放和自定义样式等进阶功能。希望这些内容能帮助你在实际项目中更好地实现和优化视频播放功能。
夏天49597
83 40
夏天49597
|
25天前
|
存储 编解码 前端开发
React 视频上传组件 Video Upload
随着互联网的发展，视频内容在网站和应用中愈发重要。本文探讨如何使用React构建高效、可靠的视频上传组件，涵盖基础概念、常见问题及解决方案。通过React的虚拟DOM和组件化开发模式，实现文件选择、进度显示、格式验证等功能，并解决跨域请求、并发上传等易错点。提供完整代码案例，确保用户能顺畅上传视频。
夏天49597
128 92
夏天49597
|
26天前
|
移动开发 前端开发 JavaScript
React 视频播放器组件：Video Player
本文介绍了如何使用 React 和 HTML5 `&lt;video&gt;` 标签构建自定义视频播放器组件。首先，通过创建基础的 React 项目和 VideoPlayer 组件，实现了基本的播放、暂停功能。接着，探讨了常见问题如视频加载失败、控制条样式不一致、性能优化不足及状态管理混乱，并提供了相应的解决方案。最后，总结了构建高效视频播放器的关键要点，帮助开发者应对实际开发中的挑战。
夏天49597
110 27
夏天49597
|
27天前
|
前端开发 UED 索引
React 图片灯箱组件 Image Lightbox
图片灯箱组件是一种常见的Web交互模式，用户点击缩略图后弹出全屏窗口展示大图，并提供导航功能。本文介绍了基于React框架的图片灯箱组件开发，涵盖初始化状态管理、图片加载与预加载、键盘和鼠标事件处理等常见问题及解决方案。通过`useState`和`useEffect`钩子管理状态，使用懒加载和预加载优化性能，确保流畅的用户体验。代码案例展示了组件的基本功能实现，包括打开/关闭灯箱、切换图片及键盘操作。
夏天49597
127 80
夏天49597
|
28天前
|
存储 前端开发 索引
React 图片轮播组件 Image Carousel
本文介绍了如何使用React创建图片轮播组件。首先，解释了图片轮播的基本概念和组件结构，包括图片容器、导航按钮、指示器和自动播放功能。接着，通过代码示例详细说明了创建基本组件、添加自动播放、处理边界情况的步骤。还探讨了常见问题如状态更新不及时、内存泄漏和样式问题，并提供了解决方案。最后，介绍了进阶优化，如添加过渡效果、支持触摸事件和动态加载图片，帮助读者构建更完善的轮播组件。
夏天49597
52 16
夏天49597
|
29天前
|
前端开发 JavaScript API
React 图片放大组件 Image Zoom
本文介绍如何使用React创建图片放大组件（Image Zoom），提升用户体验。组件通过鼠标悬停或点击触发放大效果，利用`useState`管理状态，CSS实现视觉效果。常见问题包括图片失真、性能下降和移动端支持，分别可通过高质量图片源、优化事件处理和添加触摸事件解决。易错点涉及状态管理混乱、样式冲突和过多事件绑定，建议使用上下文API、CSS模块及优化事件绑定逻辑。高级功能扩展如多张图片支持和自定义放大区域进一步丰富了组件的实用性。
夏天49597
58 25