React高阶组件使用详细介绍

更新时间：2023年01月29日 15:08:08 作者：-耿瑞-

高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧

首先我们要了解什么是高阶组件

第一高阶组件必须是一个函数

第二高阶组件接收一个参数，这个参数也必须是一个组件

第三他的返回值也是一个组件

至于高阶组件的作用我们后续会讲解本文只是带大家认识一下高阶组件并手把手带大家创建一个下面我们来创建一个react项目

然后在src目录下创建文件夹目录 components

在 components下面创建一个 assist.jsx

assist.jsx 参考代码如下

import React from "react";
export function assist(Components){
    return class extends React.Component{
      render(){
        return (
          <Components {...this.props }/>
        )
      }
    }
}

这就是一个简单的高阶组件首先我们定义并导出了一个函数他接收一个参数叫Components 到时你用这个方法就需要他的这个参数是一个组件

然后这个方法return回去的还是一个组件 Components 而我们这里的 {…this.props } 表示将父组件给的props整个传给这个Components组件

然后在 components下创建一个 subset.jsx

参开代码如下

import React,{Fragment} from "react";
export default class subset extends React.Component{
  constructor(props){
    super(props);
    this.state = {
    }
  }
  render(){
    return (
      <Fragment>
         { this.props.name }
      </Fragment>
    )
  }
}

这里就是简单创建了一个组件使用了React下的Fragment 然后在界面中使用了 this.props下的name

这个name就需要父组件传入

然后我们在components下创建 record.jsx

参考代码如下

import React from "react";
import subset from "./subset";
import { assist } from "./assist";
const Subset = assist(subset);
export default class record extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      name: "小猫猫",
    }
  }
  render(){
    return (
      <div className="App">
         <Subset name = { this.state.name }/>
      </div>
    )
  }
}

此时就可以看到我们record.jsx同时引入了 subset.jsx和assist.jsx

用subset组件作为参数调用了 assist下的assist函数也就是我们的高阶组件

这样就满足了参数是组件的需求声明一个Subset接受高阶组件的返回值他还是一个组件

然后在界面中使用了这个Subset 并传递了 name 值对应本组件的 state下的name

运行代码如下

其实相当于将 subset 传给了assist 而 assist 并没有写太多逻辑只是接受到参数组件又使用了参数组并将父组件给到 props 给了参数组件

所以相当于还是subset输出的

其实高阶组件还是让逻辑灵活了很多他的具体场景我们后续会更新

到此这篇关于React高阶组件使用详细介绍的文章就介绍到这了,更多相关React高阶组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解React ISR如何实现Demo
这篇文章主要为大家介绍了React ISR如何实现Demo详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
使用Webpack打包React项目的流程步骤
随着React应用日益复杂,开发者需要借助模块打包工具来管理项目依赖、转换代码和优化性能,Webpack是一款功能强大的模块打包器,它可以将React项目中的JavaScript、CSS、图片等资源打包成浏览器友好的文件,本文将全面介绍如何使用Webpack打包React项目
2025-03-03
React实现二级联动(左右联动)
这篇文章主要为大家详细介绍了React实现二级联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
React 中hooks之 React.memo 和 useMemo用法示例总结
React.memo是一个高阶组件,用于优化函数组件的性能,通过记忆组件渲染结果来避免不必要的重新渲染,合理使用React.memo和useMemo可以显著提升React应用的性能,本文介绍React 中hooks之 React.memo 和 useMemo用法总结,感兴趣的朋友一起看看吧
2025-01-01
React大文件分片上传原理及方案
前端进行大文件分片上传的方案几乎都是利用Blob.prototype.slice方法对文件进行分片，用数组将每一个分片存起来，最后将分片发给后端，本文给大家介绍React大文件分片上传方案，感兴趣的朋友跟随小编一起看看吧
2023-08-08
详解React中函数式组件与类组件的不同
React 函数式组件与类组件的主要区别在于它们的定义和声明方式以及它们之间的一些特性,所以本文就详细的给大家讲讲React中函数式组件与类组件有何不同,需要的朋友可以参考下
2023-09-09
详解如何在项目中使用jest测试react native组件
本篇文章主要介绍了详解如何在项目中使用jest测试react native组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
React与Redux之数组处理讲解
这篇文章主要介绍了React与Redux之数组处理讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
使用React和Redux Toolkit实现用户登录功能
在React中，用户登录功能是一个常见的需求，为了实现该功能，需要对用户输入的用户名和密码进行验证，并将验证结果保存到应用程序状态中，在React中，可以使用Redux Toolkit来管理应用程序状态，从而实现用户登录功能，需要详细了解可以参考下文
2023-05-05
React超详细讲述Fiber的使用
在fiber出现之前，react的架构体系只有协调器reconciler和渲染器render。当前有新的update时，react会递归所有的vdom节点，如果dom节点过多，会导致其他事件影响滞后，造成卡顿。即之前的react版本无法中断工作过程，一旦递归开始无法停留下来
2023-02-02

React高阶组件使用详细介绍

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具