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+antd实现动态编辑表格数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
在 React 应用中,防抖（Debounce）技术可以有效地限制函数在短时间内的频繁调用,下面我们就来看看如何使用Lodash库中的debounce函数实现React表单提交中实现防抖功能吧2024-01-01
react拖拽组件react-sortable-hoc的使用
本文主要介绍了react拖拽组件react-sortable-hoc的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
React是一种广泛使用的JavaScript库,为构建用户界面提供了强大的工具和技术,这篇文章主要给大家介绍了关于2023年最新react面试题的相关资料,文中还附有详细答案,需要的朋友可以参考下2023-10-10
React memo允许你的组件在 props 没有改变的情况下跳过重新渲染的问题记录
使用 memo 将组件包装起来,以获得该组件的一个 记忆化 版本,只要该组件的 props 没有改变,这个记忆化版本就不会在其父组件重新渲染时重新渲染,这篇文章主要介绍了React memo允许你的组件在 props 没有改变的情况下跳过重新渲染,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了从头写React-like框架的工程搭建实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了react如何向数组中追加值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
this在javascript中已经相当灵活，这篇文章主要介绍了React.js绑定this的5种方法(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
深入理解React Native原生模块与JS模块通信的几种方式
本篇文章主要介绍了深入理解React Native原生模块与JS模块通信的几种方式，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了使用react context 实现vue插槽slot功能，文中给大家介绍了vue的slot的实现方法,需要的朋友可以参考下2019-07-07
最新评论