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 高阶组件 :其中详细介绍了属性代理和反向继承的区别。


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

查看所有标签

猜你喜欢:

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

C算法(第二卷:图算法)(第3版)

C算法(第二卷:图算法)(第3版)

塞德威克(Sedgewick Robert) / 周良忠 / 第1版 (2004年1月1日) / 2004-4 / 38.0

《C算法(第2卷)(图算法)(第3版)(中文版)》所讨论的图算法,都是实际中解决图问题的最重要的已知方法。《C算法(第2卷)(图算法)(第3版)(中文版)》的主要宗旨是让越来越多需要了解这些算法的人的能够掌握这些方法及基本原理。书中根据基本原理从基本住处开始循序渐进地讲解,然后再介绍一些经典方法,最后介绍仍在进行研究和发展的现代技术。精心挑选的实例、详尽的图示以及完整的实现代码与正文中的算法和应用......一起来看看 《C算法(第二卷:图算法)(第3版)》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

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

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具