React高阶组件的使用浅析

目录
  • 高阶函数
  • 高阶组件
  • 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高阶组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 利用React高阶组件实现一个面包屑导航的示例

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁,比如react-router 中的 withRouter 以及 react-redux 中 connect 等许多 API 都是以这样的方式来实现的. 使用 React 高阶组件的好处 在工作中,我们经常会有很多功能相似,组件代码重复的页面需求,通常我们可以通过完全复制一遍代码的方式实现功能,但是这

  • 深入理解React高阶组件

    1.在React中higher-order component (HOC)是一种重用组件逻辑的高级技术.HOC不是React API中的一部分.HOC是一个函数,该函数接收一个组件并且返回一个新组件.在React中,组件是代码复用的基本单位. 2.为了解释HOCs,举下面两个例子 CommentList组件会渲染出一个comments列表,列表中的数据来自于外部. class CommentList extends React.Component { constructor() { super(

  • React 高阶组件入门介绍

    高阶组件的定义 HoC 不属于 React 的 API,它是一种实现模式,本质上是一个函数,接受一个或多个 React 组件作为参数,返回一个全新的 React 组件,而不是改造现有的组件,这样的组件被称为高阶组件.开发过程中,有的功能需要在多个组件类复用时,这时可以创建一个 Hoc. 基本用法 包裹方式 const HoC = (WrappendComponent) => { const WrappingComponent = (props) => ( <div className=&

  • React学习笔记之高阶组件应用

    是什么 高阶组件是一个函数,能够接受一个组件并返回一个新的组件.没有任何副作用. 为什么用 封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用. 如何用 //hoc为我们的高阶组件,可以使用es7装饰器语法来使用高阶组件 //当然也可以不用es7,如:let hocHello = hoc(Hello),只是es7的语法更优雅一些. //高阶组件可以叠加使用,可以对一个组件使用多个高阶组件 @hoc class Hello extends React.Component { // } 如何

  • 浅谈React高阶组件

    浅谈React高阶组件

    前段时间在工作中写Hybrid页面时遇到了这样的一个场景,公司需要一系列的活动组件,在每个组件注册的时候都需要调用App端提供的一个接口.一开始也考虑了几种方式,包括mixin.组件继承以及react高阶组件.但经过了种种衡量,最后选择使用了高阶组件的做法. 那什么是高级组件?首先你得先了解请求ES6中的class只是语法糖,本质还是原型继承.能够更好的进行说明,我们将不会修改组件的代码.而是通过提供一些能够包裹组件的组件, 并通过一些额外的功能来增强组件.这样的组件我们称之为高阶组件(High

  • react高阶组件添加和删除props

    唠叨几句啦 在看程墨老师的深入浅出高阶组件,开头一点提了一个需要,创建两个高阶组件,一个能给传入的元素自定义添加props,一个是删除特定的props.我刚刚做了一下,发现高阶组件需要区分好传入的是class还是react element, 同时也需要注意好return回去的是啥.顺便提一下高阶组件的概念,就说一个函数,能够接受一个组件作为参数,然后返回的时候,这个组件就带有这个高阶组件给的某些特性.我理解就跟掉泥坑了,得带点土出来一个道理. 对比一下两个组件,贴代码时刻来啦 删除属性的高阶组件

  • 手把手教您实现react异步加载高阶组件

    本篇文章通过分析react-loadable包的源码,手把手教你实现一个react的异步加载高阶组件 1. 首先我们想象中的react异步加载组件应该如何入参以及暴露哪些API? // 组件应用 import * as React from 'react'; import ReactDOM from 'react-dom'; import Loadable from '@component/test/Loadable'; import Loading from '@component/test/

  • React 高阶组件HOC用法归纳

    一句话介绍HOC 何为高阶组件(HOC),根据官方文档的解释:"高阶组件是react中复用组件逻辑的一项高级技术.它不属于react API的组成部分,它是从react自身组合性质中抽离出来的一种模式.具体来说,高阶组件是函数,它接受一个组件作为参数,然后返回一个新的组件 使用场景 将几个功能相似的组件里面的方法和react特性(如生命周期里面的副作用)提取到HOC中,然后向HOC传入需要封装的组件.最后将公用的方法传给组件. 优势 使代码简洁优雅.代码量更少 HOC(高阶组件) /* HOC(

  • React组件重构之嵌套+继承及高阶组件详解

    前言 在最近做的一个react项目中,遇到了一个比较典型的需要重构的场景:提取两个组件中共同的部分. 最开始通过使用嵌套组件和继承的方式完成了这次重构. 但是后来又用高阶组件重新写了一遍,发现更好一点. 在这里记录下这两种方式以便之后参考和演进. 本次重构的场景 因为场景涉及到具体的业务,所以我现在将它简化为一个简单的场景. 现在有两个黑色箱子,箱子上都有一个红色按钮,A箱子充满气体,按了按钮之后箱子里面气体变红,B箱子充满泥土,按了之后箱子里面泥土变红. 那么现在上一个简单的重构前代码: Bo

  • React高阶组件的使用浅析

    目录 高阶函数 高阶组件 react常见的高阶函数 高阶组件形式 在学习高阶组件前,首先我们了解一下高阶函数 高阶函数 把一个函数作为另一个函数的参数,那么这个函数就是高阶函数 高阶组件 一个组件的参数是组件,并且返回值是一个组件,我们称这类组件为高阶组件 react常见的高阶函数 withRouter() memo() react-redux中connect 高阶组件形式 React中的高阶组件主要有两种形式:属性代理和反向继承 属性代理:一个函数接收一个WrappedComponent组件作

  • React 高阶组件与Render Props优缺点详解

    目录 高阶组件 增强型高级组件 注入型高阶组件 高阶组件 VS Render Props 总结 高阶组件 高阶组件(HOC)是一个接受组件作为参数并返回一个新组件的函数,如果多个组件有相同的逻辑,将这些逻辑用函数封装,使它们能跨组件共用,这种用法称为高阶组件.下面的代码演示什么是高阶组件: export default function WithPrintLog(InnerComponent) { return class extends React.Component{ componentDi

  • React高阶组件使用教程详解

    目录 高阶组件(HOC) 概述 使用HOC解决横切关注点问题 不用改变原始组件使用组合 约定-将不相关的 props 传递给被包裹的组件 约定-最大化可组合性 约定-包装显示名称以便轻松调试 使用高阶组件的注意事项 高阶组件(HOC) 概述 是React复用组件逻辑的一种高级技巧,是一种基于React组合特性而形成的设计模式 高阶组件是参数为组件,返回值为新组件的函数 简单理解: 高阶组件本身是 函数,传参数是组件,返回值也是组件: 高阶组件不用关心数据是如何渲染的,只用关心逻辑即可 被包装的组

  • react高阶组件经典应用之权限控制详解

    前言 所谓高级组件,即:接受一个组件作为参数,并且其返回值也为一个react组件 而大家应该都知道,权限控制算是软件项目中的常用功能了.在网站中,权限控制一般分为两个维度:页面级别和页面元素级别. 我们来说说页面元素粒度的权限控制.在某个页面中,有个"创建用户"的按钮,管理员才能看到. 一般想到的做法类似这样 class Page extends Component{ render() { let hasCreatePermission = tool.getAuth("cre

随机推荐