高阶组件
高阶组件:高阶组件是参数为组件,返回值为新组件的函数。
作用:像我们之前用到的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