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

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

2023-06-12 95
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
|
7天前
|
前端开发 JavaScript 开发者
React 按钮组件 Button
本文介绍了 React 中按钮组件的基础概念，包括基本的 `&lt;button&gt;` 元素和自定义组件。详细探讨了事件处理、参数传递、状态管理、样式设置和可访问性优化等常见问题及其解决方案，并提供了代码示例。帮助开发者避免易错点，提升按钮组件的使用体验。
夏天49597
114 77
长梦
|
4天前
|
存储 前端开发 UED
React 面包屑组件 Breadcrumb 详解
面包屑导航是现代Web应用中常见的UI元素，帮助用户了解当前位置并快速返回上级页面。本文介绍如何使用React构建面包屑组件，涵盖基本概念、实现方法及常见问题。通过函数式组件和钩子，结合React Router动态生成路径，处理嵌套路由，并确保可访问性。示例代码展示了静态和动态面包屑的实现，帮助开发者提升用户体验。
长梦
99 73
夏天49597
|
8天前
|
前端开发 UED 开发者
React 对话框组件 Dialog
本文详细介绍了如何在 React 中实现一个功能完备的对话框组件（Dialog），包括基本用法、常见问题及其解决方案，并通过代码案例进行说明。从安装依赖到创建组件、添加样式，再到解决关闭按钮失效、背景点击无效、键盘导航等问题，最后还介绍了如何添加动画效果和处理异步关闭操作。希望本文能帮助你在实际开发中更高效地使用 React 对话框组件。
夏天49597
112 75
夏天49597
|
1月前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件，涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法，以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧，提升应用的性能和用户体验。
夏天49597
75 0
john散漫
|
1月前
|
设计模式 前端开发 编译器
与普通组件相比，React 泛型组件有哪些优势？
与普通组件相比，React 泛型组件有哪些优势？
john散漫
101 63
夏天49597
|
13天前
|
前端开发 Java API
React 进度条组件 ProgressBar 详解
本文介绍了如何在 React 中创建进度条组件，从基础实现到常见问题及解决方案，包括动态更新、状态管理、性能优化、高级动画效果和响应式设计等方面，帮助开发者构建高效且用户体验良好的进度条。
夏天49597
39 18
我是快乐的嘟嘟
|
27天前
|
存储 前端开发 测试技术
React组件的最佳实践
React组件的最佳实践
我是快乐的嘟嘟
58 28
夏天49597
|
26天前
|
前端开发 API 开发者
React 文件上传组件 File Upload
本文详细介绍了如何在 React 中实现文件上传组件，从基础的文件选择和上传到服务器，再到解决文件大小、类型限制、并发上传等问题，以及实现多文件上传、断点续传和文件预览等高级功能，帮助开发者高效构建可靠的应用。
夏天49597
52 12
夏天49597
|
21天前
|
存储 前端开发 JavaScript
React 表单输入组件 Input：常见问题、易错点及解决方案
本文介绍了在 React 中使用表单输入组件 `Input` 的基础概念，包括受控组件与非受控组件的区别及其优势。通过具体代码案例，详细探讨了创建受控组件、处理多个输入字段、输入验证和格式化的方法，并指出了常见易错点及避免方法，旨在提升表单的健壮性和用户体验。
夏天49597
33 4
夏天49597
|
28天前
|
前端开发 JavaScript API
React 文件下载组件 File Download
本文介绍了在React中实现文件下载组件的方法，包括使用`a`标签和JavaScript动态生成文件，解决了文件路径、文件类型、大文件下载及文件名乱码等问题，并展示了使用第三方库`file-saver`和生成CSV文件的高级用法。
夏天49597
38 6