高阶组件
高阶组件：高阶组件是参数为组件，返回值为新组件的函数。
作用：像我们之前用到的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依次执行
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/215742.html原文链接：https://javaforall.net
