2021年 React 高阶组件浅析

最新推荐文章于 2021-11-23 01:00:00 发布
最新推荐文章于 2021-11-23 01:00:00 发布
阅读量402 收藏
点赞数 2
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fuohua/article/details/95330603
版权

 

最近在一些项目中遇到高阶组件的身影，不是很了解，于是深入钻研了一番，以下权当是学习记录了~

 

Mixin

在谈及高阶组件之前,我们先来讲讲它的前身 mixin ~
mixin 的作用是：如果多个组件中包含相同的方法（包括普通函数和组件生命周期函数），就可以把这一类函数提取到 mixin 中，然后在需要公共方法的组件中使用 mixin, 就可以避免每个组件都去声明一次，从而达到复用。

 

React 在早期是使用 createClass 来创建一个 Component 的，而且 createClass 支持 mixin 属性，最常见的就是 react-addons-pure-render-mixin 库提供的 PureRenderMixin 方法，用来减少组件使用中一些不必要的渲染，使用方式如下：

 

import PureRenderMixin from 'react-addons-pure-render-mixin';

React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div>{this.props.name}</div>;
  }
});

 

和需要在每一个组件中都重复实现一遍 PureRenderMixin 中浅比较的逻辑相比，上面 mixin 中的使用显得更加简便和明了，同时减少了代码的冗余和重复。

 

minin 既可以定义多个组件中共享的工具方法，同时还可以定义一些组件的生命周期函数（例如上例的 shouldComponentUpdate), 以及初始的 props 和 states。

 

如下所示：

 

var propsMixin1 = {
  getDefaultProps: () => {
    return {
      name: "Amy"
    };
  }
};

var propsMixin2 = {
  getDefaultProps: () => {
    return {
      title: "mixin"
    };
  }
};

var MixinExample = createReactClass({
  mixins: [propsMixin1, propsMixin2],
  render: function() {
    return (
      <div>
        <p>{this.props.name}</p>
        <p>{this.props.title}</p>
      </div>
    );
  }
});

 

但是在使用 mixin 的时候，会有如下的几点需要注意：

 

  • 不同 mixin 中有相同的函数

    • 组件中使用多个 mixin, 同时不同 mixin 中定义了相同的工具函数，此时会报错（而不是前者覆盖后者）

    • 组件中使用多个 mixin, 同时 mixin 中定义了相同的组件生命周期函数，不会报错，此时会按传给 createClass 的 mixin 数组顺序依次调用，全部调用结束后再调用组件内部的相同的生命周期

  • 不同 mixin 中设置 props 或者 states

    • 组件中含有多个 mixin，不同的 mixin 中默认 props 或初始 state 中存在相同的 key 值时，React 会抛出异常

    • 组件中含有多个 mixin, 不同的 mixin 中默认 props 或初始 state 中存在不同的 key 值时，则默认 props 和初始 state 都会被合并。

 

附上具体示例代码地址

 

虽然 mixin 在一定程度上解决了 React 实践中的一些痛点，但是 React 从 v0.13.0 开始，ES6 class 组件写法中不支持 mixins, 但是还是可以使用 createClass 来使用 mixin。之后，React 社区提出了一种新的方式来取代 mixin，那就是高阶组件 Higher-Order Components。

 

高阶组件

高阶组件 (Higher-Order Components) 是接受一个组件作为参数，然后经过一些处理，返回一个相对增强的组件的函数。它是 React 中的一种模式，而不是 API 的一部分。React 官方给出一个公式描述如下：

 

const EnhancedComponent = higherOrderComponent(WrappedComponent);

 

一个最简单的 HOC 例子如下：

 

function HOC(WrappedComponent) {
  return class PP extends React.Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}

class Example extends React.PureComponent {
  render() {
    return (
      <div>
        <p>{this.props.age}</p>
      </div>
    );
  }
}

const HocComponent = HOC(Example);
ReactDom.render(<HocComponent age={24} />, document.getElementById("root"));

 

高阶组件的适用场景

 

它的使用场景有如下几点：

  • 需要抽离可复用的代码逻辑

  • 渲染劫持

  • 更改 state

  • 组装修改 props

 

高阶组件的实现方式

高阶组件有两种实现方式： 属性代理 (Props Proxy) 和反向继承 (Inheritance Inversion)

 

属性代理

属性代理是指所有的数据都是从最外层的 HOC 中传给被包裹的组件，它有权限对传入的数据进行修改，对于被包裹组件来说，HOC 对传给自己的属性 (Props) 起到了一层代理作用。

 

属性代理可以实现如下一些功能：

 

  • 更改 props

 

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { name, age, github } = this.props;
    return (
      <div>
        <p>{name}</p>
        <p>{age}</p>
        <p>{github}</p>
      </div>
    );
  }
}

function HOC(WrappedComponent) {
  class EnhancedComponent extends React.PureComponent {
    render() {
      const props = Object.assign({}, this.props, {
        name: "SunShinewyf",
        github: "http://github.com/SunShinewyf"
      });
      return <WrappedComponent {...props} />;
    }
  }
  return EnhancedComponent;
}

const HocComponent = HOC(Example);

ReactDom.render(<HocComponent age={24} />, document.getElementById("root"));

 

如上面的例子中，HOC 对最外层传入的 props 进行了二次组装，扩展了 props 的数据能力。

 

通过 refs 获取被包裹的组件实例

 

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
    this.consoleFun.bind(this);
  }

  consoleFun() {
    console.log("hello world");
  }

  render() {
    const { age } = this.props;
    return (
      <div>
        <p>{age}</p>
      </div>
    );
  }
}

function HOC(WrappedComponent) {
  class EnhancedComponent extends React.PureComponent {
    initFunc(instance) {
      instance.consoleFun();
    }
    render() {
      const props = Object.assign({}, this.props, {
        ref: this.initFunc.bind(this)
      });
      return <WrappedComponent {...props} />;
    }
  }
  return EnhancedComponent;
}

const HocComponent = HOC(Example);

ReactDom.render(<HocComponent age={24} />, document.getElementById("root"));

 

如果想要在 HOC 中执行被包裹组件的一些方法，就可以在 props 上组装一下 ref 这个属性，就可以获取到被包裹组件的实例，从而获取到实例的 props 以及它的方法。

 

组装被包裹组件（WrappedComponent)

 

function HOC(WrappedComponent) {
  return class PP extends React.Component {
    render() {
      <div>  //添加一些样式
      return <WrappedComponent {...this.props}/>
      </div>
    }
  }
}

 

这个比较简单，不详述~

 

反向继承 (Inheritance Inversion)

反向继承是指 HOC 继承被包裹组件，这样被包裹的组件 (WrappedComponent) 就是 HOC 的父组件了，子组件就可以直接操作父组件的所有公开的方法和字段。

 

反向继承可以实现如下功能：

 

对 WrappedComponent 的所有生命周期函数进行重写，或者修改其 props 或者 state

 

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    console.log("wrappedComponent did mount");
  }

  render() {
    const { age } = this.props;
    return (
      <div>
        <p>{age}</p>
      </div>
    );
  }
}

function HOC(WrapperComponent) {
  return class Inheritance extends WrapperComponent {
    componentDidMount() {
      console.log("HOC did mount");
      super.componentDidMount();
    }
    render() {
      return super.render();
    }
  };
}

const HocComponent = HOC(Example);

ReactDom.render(<HocComponent age={24} />, document.getElementById("root"));

// HOC did mount
// wrappedComponent did mount

 

由上面可以看到，HOC 中定义的生命周期方法可以访问到 WrappedComponent 中的生命周期方法。两者的执行顺序由代码的执行顺序决定。

 

劫持渲染

 

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { age } = this.props;
    return <input />;
  }
}

function HOC(WrapperComponent) {
  return class Inheritance extends WrapperComponent {
    render() {
      const elementsTree = super.render();
      let newProps = {};
      if (elementsTree && elementsTree.type === "input") {
        newProps = { defaultValue: "the initialValue of input" };
      }
      const props = Object.assign({}, elementsTree.props, newProps);
      const newElementsTree = React.cloneElement(
        elementsTree,
        props,
        elementsTree.props.children
      );
      return newElementsTree;
    }
  };
}

const HocComponent = HOC(Example);

ReactDom.render(<HocComponent age={24} />, document.getElementById("root"));

运行如上代码，就可以得到一个默认值为 the initialValue of input 的 input 标签。因为 HOC 在 render 之前获取了 WrappedComponent 的 Dom 结构，从而可以自定义一些自己的东西，然后再执行本身的渲染操作。

 

HOC 的功能虽然很强大，但是在使用过程中还是需要注意，React 官方给出了一些注意事项,在此不赘述~

 

附上具体示例代码地址

 

mixin VS HOC

 

mixin 和 HOC 都能解决代码复用的问题，但是 mixin 存在如下缺点：

 

  • 降低代码的可读性：组件的优势在于将逻辑与是界面直接结合在一起，mixin 本质上会分散逻辑，理解起来难度大

  • mixin 会导致命名冲突:多个 mixin 和组件本身，方法名称会有命名冲突风险，如果遇到了，不得不重命名某些方法

 

除了上面的显著缺点外，还有一些其他的，详见 Mixins Considered Harmful

 

而且 HOC 更接近于函数式变成的思想，在使用上也更加灵活，包括的功能点也更多。一张图可以很形象地表达出两者的区别：

 

由图可以看出 mixin 是一种打补丁的做法，而 HOC 则是组件的嵌套，书写起来也更加优雅~

 

 

XK-Frank
关注
专栏目录
深入理解React高阶组件
08-29
本篇文章主要介绍了深入理解React高阶组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
《十》高阶组件
花铛
02-26 1006
高阶组件也有其缺点：HOC 需要对原组件进行包裹，如果大量使用 HOC，将会产生非常多的嵌套，会让调试变得困难；而且 HOC 可以劫持 pros，在不遵守约定的情况下可能会造成 props 的冲突。，简称 HOC，就是参数为组件，返回值为新组件的函数。高阶组件对原组件进行了一层拦截，就可以对原组件进行各种增强了。高阶组件并不是 React API 的一部分，而是一种基于 React 的组合特性而形成的设计模式。高阶组件的实现案例：通过高阶组件为自定义组件统一注入用户信息作为其 props。
[react] 高阶组件(HOC)有哪些优点和缺点？
歌谣的博客
11-23 1899
[react] 高阶组件(HOC)有哪些优点和缺点？ HOC 优点 通过传递props去影响内层组件的状态，不直接改变内层组件的状态，降低了耦合度 缺点 组件多层嵌套， 增加复杂度与理解成本 ref隔断， React.forwardRef 来解决 高阶组件多层嵌套，相同命名的props会覆盖老属性 不清楚props来源与哪个高阶组件render props 优点 props命名可修改，不存在相互覆盖 清楚props来源 不会出现组件多层嵌套 缺点 函数回调形式的嵌套 写法繁琐，没有hoc装饰器写法简单 无
react 高阶组件 简介
qq_38571371的博客
07-11 134
react 高阶组件 高阶组件的概念来自于高阶函数————可以接受函数作为参数/返回值的函数。 高阶组件就是可以接受组件作为参数，返回组件的函数。 用法很多，不过可读性较差。 一般会这样用： 实现判断权限，决定返回什么组件。 实现数据处理之后再传递给（要被返回的）组件。 实现装饰器模式的功能。 实现数据请求和组件的分离。 import React from 'react'; import ReactDom from 'react-dom'; function decorator (comp: React.F
React高阶组件 和 Render Props
banketan1026的博客
09-02 709
高阶组件 本质 本质是函数，将组件作为接收参数，返回一个新的组件。HOC本身不是React API，是一种基于React组合的特而形成的设计模式。 解决的问题（作用） 一句话概括：功能的复用，减少代码冗余 进一步解释：在实际情况中，多个组件可能会做某些相同的事情，有着相同的功能，存在大量的代码冗余。我们可以将这部分功能拆分出来，每个组件尽量只保留自己独有的作用，通过HOC生...
React高阶组件的一些个人理解
liuyang1106的博客
04-23 2504
1.无状态组件function Welcome(props) {  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;}//这类组件没有自身的state2.web组件这类组件一般会有自身状态，他们可以通过setState()来更新自己的状态。我们一般使用这种组件去实现一些逻辑功能，他们可以使用无状态组件。当然了，他自己也可以给其他组件使用，这也体现了r...
浅谈React高阶组件
08-27
浅谈React高阶组件 在React中，高阶组件（Higher-Order Component，HOC）是一种非常重要的技术，用于实现组件逻辑的重用。今天，我们将深入探讨高阶组件的概念、优点和使用方法。 什么是高阶组件？ --------------...
React 高阶组件（HOC）
01-20
高阶组件（HighOrderComponent）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。 具体来说，高阶组件是一个函数，能够接受一个组件...
React 高阶组件入门介绍
08-28
React 高阶组件入门介绍 本篇文章主要介绍了 React 高阶组件的入门知识，包括高阶组件的定义、基本用法、组合方式、继承方式和注意事项。 高阶组件的定义： 高阶组件（Higher-Order Component，简称 HoC）是一种...
react高阶组件浅谈
abc的博客
08-01 575
引入及概念 1.js中高阶函数：一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。 function add(x, y, f) { return f(x) + f(y); } //当调用add(-5, 6, Math.abs)时，参数x，y和f分别接收-5，6和函数Math.abs，根据函数定义，可以推导计算过程为： //x = -5; //y = 6; //f = ...
React Hooks相对高阶组件和Class组件有什么优势/缺点
热门推荐
吴小迪的博客
07-30 2万+
文章开始前需要事先跟朋友声明下，此篇文章仅仅是笔者自己的分析与感想，非官方说明。如有不当之处，欢迎指出。 文章目录React Hooks相对高阶组件和Class组件有什么优势/缺点？一、Hooks组件相比于Class组件二、Hooks组件相比于高阶组件 React Hooks相对高阶组件和Class组件有什么优势/缺点？ 一、Hooks组件相比于Class组件 首先我认为hooks组件其实是降低了react开发的使用难度的，让新手可以在不使用class组件的情况下依然可以进行项目开发。 可能会有朋友感.
从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
ahilll的博客
08-27 149
本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) 项目地址 从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 —— 组件和 state|props 从 0 到 1 实现 Reac...
axios 安装
Fuohua的博客
04-19 7593
一、安装1、 利用npm安装npm install axios --save2、 利用bower安装bower install axios --save3、 直接利用cdn引入&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;二、例子1、 发送一个GET请求//通过给定的ID来发送请求 axi...
.map()和.filter()以及他们的区别
Fuohua的博客
04-11 2943
今天看到朋友写的一个数组对比，用的filter()，于是就想想起map()，都是对内部的元素一个一个去遍历，然后输出，到底有什么区别的。 先说下，jquery也有这两个方法，不过大家都懂得，他们都是对JavaScript进行的封装，我这里只说下JavaScript的。我们说的map()和filter()其实是： Array.prototype.map() 创建一个新的数组，其结果是该数组中每个元素...
browserHistory和hashHistory
Fuohua的博客
04-11 2845
首先 browserHistory 其实使用的是 HTML5 的 History API，浏览器提供相应的接口来修改浏览器的历史记录；而 hashHistory 是通过改变地址后面的 hash 来改变浏览器的历史记录；History API 提供了 pushState() 和 replaceState() 方法来增加或替换历史记录。而 hash 没有相应的方法，所以并没有替换历史记录的功能。但 r...
常用 React中组件通信的几种方式 2021
Fuohua的博客
05-02 538
React中组件通信的几种方式首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信1. 父组件向子组件通信React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息Child.jsximport React from 'react'; import PropTypes from 'pro...
React+DVA开发实践
Fuohua的博客
04-19 395
文档结构本文档划分为以下章节，前面几个章节是知识储备，最后章节是项目实践 ReactFluxReduxReact-RouterRoadhogAnt DesignDVA项目实践约束定语本文中蓝色字体为超链接 本文中红色字体为特别注意内容 ReactReact是近期非常火热的一个前端开发框架，当然也有很多人认为它不是一个框架，因为它仅仅是作为MVC模式中的V层用来构建UI。在整个Web应用的MVC架构...
React - Router4
Fuohua的博客
05-04 284
安装React Router被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件。进行网站（将会运行在浏览器环境中）构建，我们应当安装react-router-dom。react-router-dom暴露出rea...
探索React高阶组件的深度应用与实战
深入理解React高阶组件是React开发中一项重要的高级技术，它允许开发者以更灵活的方式重用和扩展组件的功能。在React中，组件被视为代码复用的核心单元，而高阶组件（HOC）则提供了一种巧妙的机制，使得开发者可以在...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值