React高阶组件

cncoder 发布于2019-08-26 13:35 / 2133人阅读

摘要：高阶组件高阶函数接收函数作为输入，或者输出另一个函数的一类函数高阶组件接收组件作为输入，输出一个新的组件的组件。包含了一系列实用的高阶组件库拖动库深入理解高阶组件其中详细介绍了属性代理和反向继承的区别。

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 
                )
            }
        }
    }
    App = WithHOC(App);

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

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

定义displayName后，显示如下：

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

函数柯里化

深入理解javascript函数进阶系列第二篇——函数柯里化
koa框架实践与中间件原理解析
react事件传参

柯里化 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 (
        
          
        
      )
    }
  }
}

基于反向继承的方式

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

私有云 idc机房托管高阶组件高阶函数高阶 php高阶

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109105.html

React 深入系列6：高阶组件

摘要：在项目中用好高阶组件，可以显著提高代码质量。高阶组件的定义类比于高阶函数的定义。高阶函数接收函数作为参数，并且返回值也是一个函数。 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 1. 基本概念高阶组件是React 中一个很重要且比较复杂的概念，高阶组件在很多第三方库（如Redux）中都...

2shou 2019-08-22 17:28 评论0 收藏0
深入浅出React高阶组件

摘要：博客地址背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。博客地址：http://www.luckyjing.com/post... 背景知识在开始讲述高阶组件前，我们先来回顾高阶函数的定义：接收函数作为输入，或者输出另一个函数的一类函数，被称作高阶函数。对于高阶组件，它描述的便是接受React组件作为输入，输出...

yuanzhanghu 2019-08-20 18:20 评论0 收藏0
React高阶组件

摘要：结语高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了种种衡量，最后选择使用了高阶组件的做法。 1、Mix...

ThinkSNS 2019-08-22 15:47 评论0 收藏0
从零开始学习 React 高阶组件

01、介绍 React 高阶组件也叫做 React HOC(High Order Component), 它是react中的高级技术, 用来重用组件逻辑。但高阶组件本身并不是React API。它只是一种模式，这种模式是由react自身的组合性质必然产生的。那么在学习高阶组件之前有一个概念我们必须清楚，就是高阶函数。 02、高阶函数概念：高阶函数是一个函数，它接收函数作为参数或将函数作...

_Dreams 2019-08-23 16:19 评论0 收藏0
七进七出React高阶组件

摘要：为了提高代码的复用性和可维护性，高阶函数应运而生。使用过的同学，不知道有没有使用过，高阶函数的作用和它是一样的。高阶函数在编程中扮演的角色就是火锅锅底的角色，它有公用的方法和属性，而各种组件就是肉和蔬菜。为什么要使用高阶组件？想想以前用原生和jQuery的项目，上千行的code映入眼帘，瞬间有种昏死过去的冲动。代码难以维护，改一个bug可能出现N个bug，真的是很痛苦。于是乎组件化...

miguel.jiang 2019-08-21 17:21 评论0 收藏0