AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

React-高阶组件-应用场景

2023-10-11 76
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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;




官方文档


最后


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

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

文章标签：
前端开发
数据安全/隐私保护
JavaScript
API
关键词：
React Native应用场景
React Native高阶
React Native高阶组件
react.js组件
杨不易呀
目录
相关文章
夏天49597
|
3天前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件，涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法，以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧，提升应用的性能和用户体验。
夏天49597
20 0
夏天49597
|
1月前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式，以纯函数的形式返回JSX，易于理解与维护，适用于简单的UI逻辑。类组件则是基于ES6类实现的，需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异，并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性，最后给出了相应的解决方法。通过学习，开发者可以根据具体需求选择合适的组件类型。
夏天49597
54 8
最好zzz
|
1月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件：支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中，集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架，结合阿里巴巴的通义千问（一个强大的自然语言处理服务），并通过自定义React组件来支持服务器发送事件（SSE, Server-Sent Events）的EventStream数据解析。这一组合不仅能够实现高效的实时通信，还能利用AI技术提升用户体验。
最好zzz
161 2
六卿
|
2月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design（antd）的Select组件进行二次封装，包括创建MSelect组件、定义默认属性、渲染Select组件，并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
六卿
89 2
react对antd中Select组件二次封装
夏天49597
|
7天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法，包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点，帮助开发者更好地理解和应用拖拽功能。
夏天49597
30 9
夏天49597
|
2天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件，从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面，提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文，读者可以全面了解并掌握 React 分页组件的开发技巧。
夏天49597
7 2
john散漫
|
6天前
|
设计模式 前端开发 编译器
与普通组件相比，React 泛型组件有哪些优势？
与普通组件相比，React 泛型组件有哪些优势？
john散漫
21 6
你都不懂
|
14天前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试：
学习如何为 React 组件编写测试：
你都不懂
32 2
夏天49597
|
21天前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件（HOC）是 React 中一种复用组件逻辑的方式，通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题，包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案，并提供了具体的 React 代码示例。通过本文，读者可以更好地理解和应用 HOC，提高代码的复用性和可维护性。
夏天49597
48 8
想飞的雪糕
|
20天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时，利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成，通过抽象出辅助方法`useRx`和`pushPipe`，实现跨框架的状态管理。具体介绍了各框架的响应式机制，展示了如何将RxJS的Observable对象转化为框架的响应式数据，并通过示例代码演示了使用方法。此外，还讨论了全局状态源与WebComponent的部署优化，以及一些实践中的改进点。这些方法不仅简化了异步编程，还提升了代码的可读性和可维护性。
想飞的雪糕
60 1