react高阶组件的使用

高阶组件

高阶组件：高阶组件是参数为组件，返回值为新组件的函数。
作用：像我们之前用到的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依次执行