react高阶组件的使用

react高阶组件的使用高阶组件高阶组件:高阶组件是参数为组件,返回值为新组件的函数。作用:像我们之前用到的react的Form组件和redux的connect函数都是高阶组件,使用高阶组件能够提高代码复用能力实现一个高阶组件实现一个高阶组件很容易,只需要简单的几步就好了importReact,{useEffect,useState}from”react”;interfaceProps{}functionWithComponent(WrappedComponent:React.FC&l

高阶组件

高阶组件:高阶组件是参数为组件,返回值为新组件的函数。
作用:像我们之前用到的react的Form组件和redux的connect函数都是高阶组件,使用高阶组件能够提高代码复用能力

实现一个高阶组件

实现一个高阶组件很容易,只需要简单的几步就好了

import React, { 
    useEffect, useState } from "react";
interface Props{ 
   
    
}
function WithComponent(WrappedComponent: React.FC<Props>) { 
   
    return function(props:any){ 
   
        return (<div>
            <WrappedComponent { 
   ...props}>
                <div>
                    嵌套内容
                </div>
            </WrappedComponent>
        </div>)
    }
}
export default WithComponent;

使用高阶组件

import WithComponent from "@/components/WithComponent";
import React from "react";
import { 
    connect } from "react-redux";
import { 
    bindActionCreators } from "redux";

function Test(props:any){ 
   
    return (
        <div>
            Test
            { 
   props.children}
        </div>
    )
}

export default WithComponent(Test);

显示效果如下:
在这里插入图片描述

套用高阶组件

一个组件是可以被多个高阶组件包裹的
类似于这样:


  export default connect(mapStateToProps, mapDispatchToProps)(WithComponent(Test));

当组件被包裹的层数过多时官方文档也给出了解决方案

const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// ... 你可以编写组合工具函数
// compose(f, g, h) 等同于 (...args) => f(g(h(...args)))
const enhance = compose(
  // 这些都是单参数的 HOC
  withRouter,
  connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

compose是一个类似于数组的reduce方法的方法,将h、g、f依次执行

今天的文章react高阶组件的使用分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/4982.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注