React高阶组件的使用浅析

 更新时间:2022年08月13日 14:04:34   作者:是张鱼小丸子鸭  
高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React高阶组件使用小结,一起看看吧

在学习高阶组件前,首先我们了解一下高阶函数

高阶函数

把一个函数作为另一个函数的参数,那么这个函数就是高阶函数

高阶组件

一个组件的参数是组件,并且返回值是一个组件,我们称这类组件为高阶组件

react常见的高阶函数

withRouter()

memo()

react-redux中connect

高阶组件形式

React中的高阶组件主要有两种形式:属性代理和反向继承

属性代理:一个函数接收一个WrappedComponent组件作为参数传入,并返回一个继承React.Component组件的类,且在该类的render()方法中返回被传入的WrappedComponent组件

反向继承:是一个函数接收一个WrappedComponent组件作为参数传入,并返回一个继承了该传入的WrappedComponent组件的类,且在该类的render()方法中返回super.render()方法

注意:反向继承必须使用类组件,因为函数组件没有this指向

属性继承方式的代码

function Goods(props) {
    console.log(props);
    return (
        <div className="box1">
            <h3 style={{color:props.color}}>Hello Js</h3>
        </div>
    )
}
//高阶组件的代码, 属性代理的方式
function Color(WrapperComponent){
    return class Color extends React.Component{
        render(){
            console.log(this.props)
            let obj = {color:"#0088dd"}
            return (
                <WrapperComponent {...this.props} {...obj}/>
            )
        }
    }
}
export default Color(Goods);

高阶组件我们也可以把他进行单独的剥离出来,然后把他在各个组件中使用

HOC.js文件

import React from 'react';
//高阶组件的代码, 属性代理的方式
export default function Mouse(WrapperComponent){
    return class Mouse extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                x:0,
                y:0,
            }
            this.getMouse();
        }
        getMouse = ()=>{
            document.addEventListener("mousemove",(event)=>{
                this.setState({
                    x:event.clientX,
                    y:event.clientY
                })
            })
        }
        render() {
            // console.log(this.state);
            return (
                <WrapperComponent {...this.props} {...this.state}/>
            )   
        }
    }
}

goods.js文件

import Mouse from "../context/HOC";
function Goods(props) {
    console.log(props);
    let {x,y} = props;
    return (
        <div className="box1">
            <div>
                鼠标坐标:x:{x},y:{y}
            </div>
            <h3 >Hello Js</h3>
        </div>
    )
}
export default Mouse(Goods);

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

相关文章

  • React使用ref方法与场景介绍

    React使用ref方法与场景介绍

    这篇文章主要介绍了React使用ref方法与场景,React支持给任意组件添加特殊属性。ref属性接受一个回调函数,它在组件被加载或卸载时会立即执行
    2022-10-10
  • React Native自定义Android的SSL证书链校验

    React Native自定义Android的SSL证书链校验

    这篇文章主要为大家介绍了React Native自定义Android的SSL证书链校验示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • React render核心阶段深入探究穿插scheduler与reconciler

    React render核心阶段深入探究穿插scheduler与reconciler

    这篇文章主要介绍了React render核心阶段穿插scheduler与reconciler,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-11-11
  • react 中父组件与子组件双向绑定问题

    react 中父组件与子组件双向绑定问题

    这篇文章主要介绍了react 中父组件与子组件双向绑定问题,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • React18新增特性released的使用

    React18新增特性released的使用

    本文主要介绍了React18新增特性released的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 使用react-beautiful-dnd实现列表间拖拽踩坑

    使用react-beautiful-dnd实现列表间拖拽踩坑

    相比于react-dnd,react-beautiful-dnd更适用于列表之间拖拽的场景,本文主要介绍了使用react-beautiful-dnd实现列表间拖拽踩坑,感兴趣的可以了解一下
    2021-05-05
  • React BootStrap用户体验框架快速上手

    React BootStrap用户体验框架快速上手

    这篇文章主要介绍了React BootStrap用户体验框架快速上手的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-03-03
  • React组件化的一些额外知识点补充

    React组件化的一些额外知识点补充

    React是一个用于构建用户界面的JavaScript库,下面这篇文章主要给大家介绍了关于React组件化的一些额外知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • react echarts tree树图搜索展开功能示例详解

    react echarts tree树图搜索展开功能示例详解

    这篇文章主要为大家介绍了react echarts tree树图搜索展开功能示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • React Native基础入门之初步使用Flexbox布局

    React Native基础入门之初步使用Flexbox布局

    React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案,下面这篇文章主要给大家介绍了关于React Native基础入门之初步使用Flexbox布局的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2018-07-07

最新评论