React系列之高阶组件HOC实际应用指南

最新推荐文章于 2024-03-17 17:39:38 发布
最新推荐文章于 2024-03-17 17:39:38 发布
阅读量442 收藏 1
点赞数
文章标签： javascript json ViewUI
原文链接：https://juejin.im/post/5a5dc82151882573392cbe37
版权

前言

Higher-Order function（高阶函数）大家很熟悉，在函数式编程中的一个基本概念，它描述了这样一种函数：这种函数接受函数作为输出，或者输出一个函数。比如常用的工具方法reduce，map等都是高阶函数

现在我们都知道高阶函数是什么,Higher-Ordercomponents（高阶组件）其实也是类似于高阶函数，它接受一个React组件作为输入，输出一个新的React组件

Concretely, a higher-order component is a function that takes a component and returns a new component.

通俗的语言解释：当我们用一个容器（w）把React组件包裹，高阶组件会返回一个增强（E）的组件。高阶组件让我们的代码更具有复用性，逻辑性与抽象特。它可以对props和state进行控制，也可以对render方法进行劫持...

大概是这样：

const EnhancedComponent = higherOrderComponent(WrappedComponent)

简单例子：

import React, { Component } from 'react';
import ExampleHoc from './example-hoc';

class UseContent extends Component {
  render() {
    console.log('props:',this.props);
    return (
    <div>
       {this.props.title} - {this.props.name}
    </div>
    )
  }
}
export default ExampleHoc(UseContent)
复制代码
import React, { Component } from 'react';

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    constructor(props) {
        super(props)
        this.state = {
         title: 'hoc-component',
         name: 'arcsin1',
        }
    }
    render() {
       const newProps = {
        ...this.state,
       }
       return <WrappedComponent {...this.props} {...this.newProps} />
    }
  }
}
export default ExampleHoc
复制代码

组件UseContent，你可以看到其实是一个很简单的一个渲染而已，而组件ExampleHoc对它进行了增强，很简单的功能.

应用场景

以下代码我会用装饰器(decorator)书写

属性代理。 高阶组件通过被包裹的React组件来操作props
反向继承。 高阶组件继承于被包裹的React组件
1. 属性代理

小列子说明：

import React, { Component } from 'react'
import ExampleHoc from './example-hoc'

@ExampleHoc
export default class UseContent extends Component {
  render() {
    console.log('props:',this.props);
    return (
        <div>
           {...this.props} //这里只是演示
        </div>
    )
  }
}
复制代码
import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    render() {
       return <WrappedComponent {...this.props} />
    }
  }
}
export default ExampleHoc
复制代码

这样的组件就可以作为参数被调用，原始组件就具备了高阶组件对它的修饰。就这么简单，保持单个组件封装性的同时还保留了易用性。当然上述的生命周期如下：

didmount -> HOC didmount ->(HOCs didmount) ->（HOCs willunmount）-> HOC willunmount -> unmount

  • 控制props

    我可以读取，编辑，增加，移除从WrappedComponent传来的props，但是需要小心编辑和移除props。我们应该对高阶组件的props作新的命名防止混淆了。

    例如:

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    render() {
       const newProps = {
           name: newText,
       }
       return <WrappedComponent {...this.props}  {...newProps}/>
    }
  }
}
export default ExampleHoc
复制代码

  • 通过refs使用引用

    在高阶组件中，我们可以接受refs使用WrappedComponent的引用。 例如：

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    proc = wrappedComponentInstance => {
        wrappedComponentInstance.method()
    }
    render() {
       const newProps = Object.assign({}, this.props,{
           ref: this.proc,
       })
       return <WrappedComponent {...this.newProps} />
    }
  }
}
export default ExampleHoc
复制代码

当WrappedComponent被渲染的时候，refs回调函数就会被执行，这样就会拿到一份WrappedComponent的实例的引用。这样就可以方便地用于读取和增加实例props，并调用实例。

  • 抽象state

我们可以通过WrappedComponent提供props和回调函数抽象state。就像我们开始的例子，我们可以把原组件抽象为展示型组件，分离内部状态，搞成无状态组件。

例子：

import React, { Component } from 'react';

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    constructor(props) {
        super(props)
        this.state = {
         name: '',
        }
    }
    onNameChange = e => {
        this.setState({
            name: e.target.value,
        })
    }
    render() {
       const newProps = {
         name: {
            value: this.state.name,
            onChange: this.onNameChange,
         }
       }
       return <WrappedComponent {...this.props} {...newProps} />
    }
  }
}
export default ExampleHoc
复制代码

在上面 我们通过把input的name prop和onchange方法提到了高阶组件中，这样有效的抽象了同样的state操作。

用法：
import React, { Component } from 'react'
import ExampleHoc from './example-hoc'

@ExampleHoc
export default class UseContent extends Component {
  render() {
    console.log('props:',this.props);
    return (
        <input name="name" {this.props.name} />
    )
  }
}
这样就是一个受控组件
复制代码

  • 其它元素包裹WrappedComponent

    其它，我们可以使用其它元素包裹WrappedComponent，这样既可以增加样式，也可以方便布局。例如

import React, { Component } from 'react'

const ExampleHoc = WrappedComponent => {
  return class extends Component {
    render() {
       return (
            <div style={{display: 'flex'}}>
                <WrappedComponent {...this.props} />
            </div>
       )
    }
  }
}
export default ExampleHoc
复制代码
2. 反向继承

从字面意思，可以看出它与继承相关，先看看例子：

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
       return super.render()
    }
  }
}
复制代码

正如看见的，高阶组件返回的组件继承与WrappedComponent，因为被动继承了WrappedComponent，所有的调用都是反向。所以这就是反代继承的由来。 这种方法与属性代理不太一样，它通过继承WrappedComponent来实现，方法可以通过super来顺序调用，来看看生命周期：

didmount -> HOC didmount ->(HOCs didmount) -> willunmount -> HOC willunmount ->（HOCs willunmount）

在反向继承中，高阶函数可以使用WrappedComponent的引用，这意味着可以使用WrappedComponent的state，props,生命周期和render方法。但它并不能保证完整的子组件树被解析，得注意。

  • 渲染劫持

渲染劫持就是高阶组件可以控制WrappedComponent的渲染过程，并渲染各种各样的结果。我们可以在这个过程中任何React元素的结果中读取，增加，修改，删除props,或者修改React的元素树，又或者用样式控制包裹这个React元素树。

因为前面说了它并不能保证完整的子组件树被解析，有个说法：我们可以操控WrappedComponent元素树，并输出正确结果，但如果元素树种包含了函数类型的React组件，就不能操作组件的子组件。

先看看有条件的渲染例子：

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
      if(this.props.loggedIn) { //当登录了就渲染
           return super.render()
      } else {
          return null
      }
      
    }
  }
}
复制代码

对render输出结果的修改:

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
      const eleTree = super.render()
      let newProps = {}
      
      if(eleTree && eleTree.type === 'input') { 
           newProps = {value: '这不能被渲染'}
      } 
      const props = Object.assgin({},eleTree.props,newProps)
      const newEleTree = React.cloneElement(eleTree, props, eleTree.props.children)
      return newEleTree
      
    }
  }
}
复制代码

  • 控制state

    高阶组件是可以读取，修改，删除WrappedComponent实例的state，如果需要的话，也可以增加state，但这样你的WrappedComponent会变得一团糟。因此大部分的高阶组件多都应该限制读取或者增加state，尤其是增加state，可以通过重新命名state，以防止混淆。

    看看例子：

const ExampleHoc = WrappedComponent => {
  return class extends WrappedComponent {
    render() {
      <div>
       <h3>HOC debugger</h3>
       <p>Props <pre>{JSON.stringfy(this.props,null,1)}</pre></p>
       <p>State <pre>{JSON.stringfy(this.state,null,2)}</pre></p>
       {super.render()}
      </div>
    }
  }
}
复制代码
高阶组件接受其它参数

举个列子，我把用户信息存在本地LocalStorage中，当然里面有很多key，但是我不需要用到所有，我希望按照我的喜好得到我自己想要的。

import React, { Component } from 'react'

const ExampleHoc = (key) => (WrappedComponent) => {

  return class extends Component {
    componentWillMount() {
      let data = localStorage.getItem(key);
        this.setState({data});
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />
    }
  }
}

复制代码
import React, { Component } from 'react'

class MyComponent2 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }

}

const MyComponent2WithHOC = ExampleHoc(MyComponent2, 'data')

export default MyComponent2WithHOC

复制代码
import React, { Component } from 'react'

class MyComponent3 extends Component {  
  render() {
    return <div>{this.props.data}</div>
  }
}
const MyComponent3WithHOC = ExampleHoc(MyComponent3, 'name')

export default MyComponent3WithHOC
复制代码

实际上，此时的ExampleHoc和我们最初对高阶组件的定义已经不同。它已经变成了一个高阶函数，但这个高阶函数的返回值是一个高阶组件。我们可以把它看成高阶组件的变种形式。这种形式的高阶组件大量出现在第三方库中。如react-redux中的connect就是一个典型。请去查看react-redux的api就可以知道了。

有问题望指出，谢谢！

参考：

  1. Higher-Order Components: higher-order-components

  2. React Higher Order Components in depth: React Higher Order Components in depth

转载于:https://juejin.im/post/5a5dc82151882573392cbe37

weixin_33895516
关注
React教程之 React 中的高阶组件 (HOC) 简介
iCloudEnd的博客
06-23 873
本文旨在让您了解高阶组件的工作原理以及使用它们的时间和原因。我们会保持它对初学者友好，以帮助您更好地理解这个概念及其存在的原因。一般来说，高阶组件是一种函数式编程方法。但是，本文不需要任何函数式编程知识，但需要一些 React 基础知识。我们假设您已经熟悉 React、React 组件、React 道具、生命周期方法以及如何使用 React 构建基本应用程序。我们将介绍一些函数式编程概念，这些概念将帮助您更好地理解 HOC。让我们从正式的定义开始：HOC 不是 React 或任何其他编程语言中的功能，而是从
【React系列】高阶组件
川峰的博客
01-02 1154
什么是高阶组件呢？相信很多同学都听说过，也用过 高阶函数，它们非常相似，所以我们可以先来回顾一下什么是 高阶函数。JavaScript中比较常见的都是高阶函数。高阶组件并不是React API的一部分，它是基于React的组合特性而形成的；withRouter在我们的开发中，高阶组件可以帮助我们做哪些事情呢？
React高阶组件（HOC）
qd888886的博客
04-29 428
你可以想象，在一个大型应用程序中，这种订阅DataSource和调用setState的模式将一次又一次地发生。我们需要一个抽象，允许我们在一个地方定义这个逻辑，并在许多组件之间共享它。这正是高阶组件擅长的地方。 对于订阅了DataSource的组件，比如CommentList和BlogPost，我们可以编写一个创建组件函数。该函数将接受一个子组件作为它的其中一个参数（可以是多个参数），该子组件将订阅数据作为 prop。 //withSubscription为高阶组件，复用逻辑提取到里面 const Comm
React的高阶组件（HOC）的构建与应用
weixin_42924369的博客
07-18 377
高阶组件 ​ 高阶组件（HOC）是react中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。 ​ 具体而言，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件，高阶组件会对传入的组件做一些通用的处理。比如：我们希望给组件的的下方增加一个版权信息，那么就可以使用高阶组件。把原始组件传入，然后，给组件增加一个版权信息后，再返回。 ​ 高阶组件是通过将原组件 包裹（wrapping） 在容器组件（cont
关于React的高阶组件（HOC)
shadowfall的博客
03-12 192
什么是高阶组件（HOC) Higher-Order Components就是一个函数，传给它一个组件，它返回一个新的组件。 高阶组件：就相当于手机壳，通过包装组件，增强组件功能。 实现步骤： 首先创建一个函数 指定函数参数，参数应该以大写字母开头 在函数内部创建一个类组件或函数组件，提供复用的状态逻辑代码，并返回 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件（可选，如有） 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面 （HOC)作用： 进行权限控制
react篇之高阶组件-HOC
weixin_34023982的博客
09-28 120
高阶组件 简单来说，高阶组件可以看做一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 其实高阶组件，也是为了更好地复用之前的组件。它可以理解为，基础组件通过包裹处理，生成一个适应某些场景的组件。 它可能存在于以下几种场景： 定制props 一个简单例子： function withMoreThings(WrappedComponent) { return class exten...
React之HOC(高阶组件)
qq_45799465的博客
04-14 4396
React之HOC(高阶组件) 组件装饰器 memoization(计算属性-记忆组件) 渲染属性(Render Props)
React 高阶组件（HOC）
01-20
高阶组件（HighOrderComponent）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体来说，高阶组件是一个函数，能够接受一个组件...
React学习笔记之高阶组件应用
08-27
React高阶组件（High-Order Components，简称HOCs）是React生态系统中一种强大的抽象工具，用于重用组件逻辑。HOCs本质上是纯函数，它们接收一个React组件作为输入，并返回一个新的组件。这种设计模式使得HOCs成为...
react-patterns-hoc：React文档中HOC的示例应用
02-22
该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESLint等）直接复制到您的项目中，因此
「react进阶」一文吃透React高阶组件(HOC)
奇舞周刊
03-18 2388
一 前言React高阶组件(HOC)，对于很多react开发者来说并不陌生，它是灵活使用react组件的一种技巧，高阶组件本身不是组件，它是一个参数为组件，返回值也是一个组件的函数。高阶作...
react中的高阶组件HOC
yinge0508的博客
01-23 437
react项目中使用hoc的例子： 1，使用 create-react-app react-hoc 创建项目（react-hoc是项目名字），这种方式创建的项目默认是不支持装饰器的，配置方式可查看react中使用装饰器_yinge0508的博客-CSDN博客， 创建项目并配置后的项目目录结构如下所示： 高阶组件Hoc/index.js： import React, { Component } from 'react'; const Hoc = (Comp) => { return c.
React HOC高阶组件
oLylia的博客
10-10 340
React HOC高阶组件
React中的高阶组件（HOC）
liwusen的博客
07-22 2802
简要介绍：React中不会用到组件的继承，作者选择用组合来代替继承，但是存在一种情况，就是两种组件方法类似，如果能有一种“类继承”的方式，在同一个函数中可以生产这两种组件，那么就可以大量的减少代码的冗余，在React的高阶组件实现了Decorator 模式来模拟继承或者说来代替继承。1、什么是高阶组件（high order component）高阶组件的定义：就是一个函数，这个函数传入一个组件，然后
React 高阶组件HOC详解
qq_43293207的博客
05-30 901
参考链接： https://juejin.cn/post/6844903815762673671 https://juejin.cn/post/6844904050236850184 前言 高阶组件与自定义hooks是React 目前流行的状态逻辑复用的两种解决方案 1.高阶组件是什么 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。 高阶组件（HOC）是React中的高级技术，用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组
「React」一文带你了解高阶组件HOC
公众号：前端充电宝
01-23 585
目录1. 高阶组件的概念2. 高阶组件实现属性代理（1）操作 props（2）获取 refs 的引用（3）抽象 state（4）用其他元素包裹组件3. 高阶组件实现渲染劫持4. 高阶组件实现反向继承5. 高阶组件抽取共同逻辑6. 高阶组件的高级用法7. 高阶组件的链式调用8. 高阶组件的应用场景（1）React Redux（2）埋点操作（3）页面权限管理9. 不要滥用高阶组件（1）处理 displayName 麻烦（2）增加静态函数的支持（3）嵌套调用混乱（4）重复产生 React 组件10. 高阶组件的注
React高阶组件详解
最新发布
qq_45859670的博客
03-17 1279
HOC有一项独特的特性，就是可以给被HOC包裹的业务组件，提供一些拓展功能，比如说额外的生命周期，额外的事件，但是这种HOC，可能需要和业务组件紧密结合。劫持渲染是hoc一个特性，在wrapComponent包装组件中，可以对原来的组件，进行条件渲染，节流渲染，懒加载等功能。我们来看一下上面这个例子，return 返回结果是父组件（代理组件）对子组件（业务组件）的一系列操作。HOC采用继承的方式, 代理组件继承了业务组件的本身，我们在使用的时候直接实例化代理组件HOC即可。我们看这个例子，代理组件中。
探索React高阶组件的深度应用与实战
深入理解React高阶组件是React开发中一项重要的高级技术，它允许开发者以更灵活的方式重用和扩展组件的功能。在React中，组件被视为代码复用的核心单元，而高阶组件（HOC）则提供了一种巧妙的机制，使得开发者可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值