React高阶组件

栏目: IOS · Android · 发布时间: 5年前

内容简介:高阶函数: 接收函数作为输入,或者输出另一个函数的一类函数; 高阶组件: 接收React组件作为输入,输出一个新的React组件的组件。高阶组件通过包裹一个新传入的React组件,经过一些逻辑处理,最终返回一个enchanted的React组件,是其他组件调用.如果未定义displayName,那么进行调试的时候,就会显示如下:

React高阶组件

高阶函数: 接收函数作为输入,或者输出另一个函数的一类函数; 高阶组件: 接收React组件作为输入,输出一个新的React组件的组件。

高阶组件通过包裹一个新传入的React组件,经过一些逻辑处理,最终返回一个enchanted的React组件,是其他组件调用.

一些前提了解知识点

  • ReactComponent: 定义调用时的组件name
function getDisplayName(component) {
        return component.displayName || component.name || 'Component';    
        
    }

    export default function WithHOC(WrapComponent) {
        // 此处未定义名称
        return class extends React.Component {
            // 定义displayName;
            static displayName = `withHOC(${getDisplayName(WrapComponent)})`;
            render() {
                console.log('inside HOC');
                return (
                    return <WrapComponent {...this.props} />
                )
            }
        }
    }
    App = WithHOC(App);

如果未定义displayName,那么进行调试的时候,就会显示如下:

// react自动定义名称
    |---_class2
      |---App
        ...

定义displayName后,显示如下:

|---withHOC(App)
      |---App
        ...

函数柯里化

  • 柯里化 Curry

只传递函数的一部分参数来调用它,让它返回一个函数去处理剩下的参数

  • 函数乔明 func(params)(otherParams);

在react里,通过函数柯里化,我们可以通过传入不同的参数来得到不同的高阶组件

基于属性代理的方式

属性代理最常见的高阶组件的使用方式,上述描述的高阶组件就是这种方式。它通过做一些操作,将被包裹组件的props和新生成的props一起传递给此组件,这称之为属性代理。

import React from 'react';
export default function withHeader(WrapperComponent) {
  return class extends React.Component {
    render() {
      const newProps = {
        test: 'hoc'
      };
      // 透传props,并且传递新的newProps
      return (
        <div>
          <WrapperComponent {...this.props} {...newProps} />
        </div>
      )
    }
  }
}

基于反向继承的方式

这种方式返回的React组件继承了被传入的组件,所以它能够访问到的区域、权限更多,相比属性代理方式,它更像打入组织内部,对其进行修改。具体的可以参考附录里提供的链接进行深入学习。

export default function (WrappedComponent) {
  return class Inheritance extends WrappedComponent {
    componentDidMount() {
      // 可以方便地得到state,做一些更深入的修改。
      console.log(this.state);
    }
    render() {
      return super.render();
    }
  }
}

组合多个高阶组件

上述高阶组件为React组件增强了一个功能,如果需要同时增加多个功能需要怎么做?这种场景非常常见,例如我既需要增加一个组件标题,又需要在此组件未加载完成时显示Loading.

@withHeader
@withLoading
class Demo extends Component{

}

使用compose可以简化上述过程,也能体现函数式编程的思想。

const enhance = compose(withHeader,withLoading);
    @enhance
    class Demo extends Component{
    
    }

组合compose

compose可以帮助我们组合任意个(包括0个)高阶函数,例如compose(a,b,c)回一个新的函数d,函数d依然接受一个函数作为入参,只不过在内部会依次调用c,b,a,从表现层对使用者保持透明。

基于这个特性,我们便可以非常便捷地为某个组件增强或减弱其特征,只需要去变更compose函数里的参数个数便可。

compose函数实现方式有很多种,这里推荐其中一个recompact.compose,详情见下方参考类库。

recompact :包含了一系列实用的高阶组件库

React Sortable :React拖动库

深入理解 React 高阶组件 :其中详细介绍了属性代理和反向继承的区别。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

复杂网络理论及其应用

复杂网络理论及其应用

汪小帆、李翔、陈关荣 / 清华大学出版社 / 2006 / 45.00元

国内首部复杂网络专著 【图书目录】 第1章 引论 1.1 引言 1.2 复杂网络研究简史 1.3 基本概念 1.4 本书内容简介 参考文献 第2章 网络拓扑基本模型及其性质 2.1 引言 2.2 规则网络 2.3 随机图 2.4 小世界网络模型 2.5 无标度网络模型 ......一起来看看 《复杂网络理论及其应用》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具