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(// 这些都是单参数的 HOCwithRouter,connect(commentSelector)
)
const EnhancedComponent = enhance(WrappedComponent)

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

react高阶组件的使用相关推荐

react实现汉堡_利用 React 高阶组件实现一个面包屑导航
什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...
[react] 高阶组件(HOC)有哪些优点和缺点？
[react] 高阶组件(HOC)有哪些优点和缺点? HOC 优点通过传递props去影响内层组件的状态,不直接改变内层组件的状态,降低了耦合度缺点组件多层嵌套, 增加复杂度与理解成本 ref隔 ...
「react进阶」一文吃透React高阶组件(HOC)
一前言 React高阶组件(HOC),对于很多react开发者来说并不陌生,它是灵活使用react组件的一种技巧,高阶组件本身不是组件,它是一个参数为组件,返回值也是一个组件的函数.高阶作用用于强化 ...
React高阶组件探究
React高阶组件探究在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
react组件类型及深入理解react高阶组件
React中常见的组件类型及分类: 1.展示组件(Presentational component) 与容器组件(Container component) 2.类组件(Class component ...
React高阶组件_阶段1
react高阶组件_阶段1 作用: 个人总结的高阶组件设计的作用主要有两点, 这里直接使用装饰器方式非装饰器使用请结合我的博文"react基础梳理_阶段1"中的"自定义 ...
react 高阶组件hoc使用
react 高阶组件hoc使用 1. 为什么使用高阶组件 2. 具体使用 2.1原代码: 2.2 使用hoc封装后 1. 为什么使用高阶组件高阶组件(HOC)是 React 中用于复用组件逻辑的一种 ...
使用react 高阶组件withRouter
使用react 高阶组件withRouter withRouter 是一个高阶组件,把 match,location,history 三个对象注入到组件的 props 中.这是一个非常实用的函数 re ...
react 高阶组件
react 高阶组件概述目的:实现状态逻辑复用采用包装(装饰)模式,比如说:手机壳手机:获取保护功能手机壳:提供保护功能高阶组件就相当于手机壳,通过包装组件,增强组件功能思路分析高阶 ...
react高阶组件和hooks
1. react高阶组件 1.1 高阶组件的概念高阶组件(Higher Order Component,简称:HOC ): 是 React 中用于重用组件逻辑的高级技术, 它本身不是react中的组 ...