React高阶组件

ThinkSNS 发布于2019-08-22 15:47 / 1779人阅读

摘要：结语高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。

前段时间在工作中写Hybrid页面时遇到了这样的一个场景，公司需要一系列的活动组件，在每个组件注册的时候都需要调用App端提供的一个接口。一开始也考虑了几种方式，包括mixin、组件继承以及react高阶组件。但经过了种种衡量，最后选择使用了高阶组件的做法。

1、Mixins的缺点

React官方已不推荐使用Mixins的技术来实现代码的重用，Mixins技术有一系列的缺点，首先Mixins会造成命名冲突，我们通过以下的方式来注入Mixins：

var myMixins = require("myMixins");

var Button = React.createClass({
    mixins: [myMixins],
    
    // ...
})

如果你需要注入多个mixins,其中一个是自己的，另外的可能是第三方的。那有可能在两个mixins里使用了相同名称的方法，这会使得其中的一个不起作用，而你能做的只有修改其中一个方法的名称。另一方面，一个mixins一开始可能是非常简单的，仅仅需要实现某一个功能，但当业务越加的复杂，需要往其中加入更多的方法的时候，就会变得非常复杂。要深入了解mixins的缺点，可以查看官方博客。

2、组件继承

对于我自己来说这种方法以前使用的比较多，先创建一个BaseComponent，在其中实现一系列公共的方法，其后的每个组件都继承于这个组件，但缺点是不够灵活，在基础组件中只能实现一些比较固定的方法，而对于每个组件的定制化会有很大的限制。

3、React高阶组件

由于mixins的一系列缺点，React官方也意识到使用mixins所带来的痛点远远高于技术本身产生的优点，而高阶组件便可以代替mixins，而且当深入之后它还有着更加丰富的用法。

高阶组件（HOC）是React中对组件逻辑进行重用的高级技术。但高阶组件本身并不是React API。它只是一种模式，这种模式是由React自身的组合性质必然产生的。

高阶函数

说到高阶组件，就先得说到高阶函数了，高阶函数是至少满足下列条件的函数：

1、接受一个或多个函数作为输入  
2、输出一个函数

在javascript这门函数为一等公民的语言中，高阶函数的使用还是非常之多的，像我们平时的回调函数等等，都用到了高阶函数的知识。我们先来看一个简单的高阶函数

var fun = function(x, y) {
    return x + y;
}

fun是一个函数，下面我们将整个函数作为参数传递给另一个函数

var comp = function(x, y, f) {
    return f(x,y);
}

验证一下

comp(1,2,fun) // 3

高阶组件定义

类比高阶函数的定义，高阶组件就是接受一个组件作为参数，在函数中对组件做一系列的处理，随后返回一个新的组件作为返回值。

我们先定义一个高阶组件BaseActivity

const BaseActivity = (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        
          我的包裹组件
          
        
        
      )
    }
  }
}

组件接受一个被包裹的组件作为参数，返回了一个经过处理的匿名组件。
在其他组件中使用这个高阶组件

class Example extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      width: "100%",
      height: "100%"
    }
  }

  componentWillMount() {
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
      return;
    } else {
      this.setState({
        width: "375px",
        height: "640px"
      })
    }
  }

  render() {
    let { width, height } = this.state;
    return (
      
        
          
        
      
    )
  }
}

export default BaseActivity(Example);

具体用法就是在export 组件的时候，使用BaseActivity函数来包裹这个组件，看下输出的react dom内容

在Example组件外面包裹了一个匿名组件。

参数

既然高阶组件是一个函数，我们就可以向里面传递我们需要的参数

const BaseActivity = (WrappedComponent, title) => {
  return class extends Component {
    render() {
      return (
        
          {title}
          
        
        
      )
    }
  }
}

在Example中这样export

export default BaseActivity(Example, "这是高阶组件的参数");

我们看下输出的react dom

可以看到参数已经传递进去了。

当然还可以这样用(柯里化)

const BaseActivity (title) => (WrappedComponent) => {
  return class extends Component {
    render() {
      return (
        
          {title}
          
        
        
      )
    }
  }
}

在Example中这样export

export default BaseActivity("这是高阶组件的参数")(Example);

这种用法在ant-design的表单以及redux的connect中我们都可以看到

// ant
const WrappedDemo = Form.create()(Demo)

// redux
export default connect(mapStateToProps, mapDispatchToProps)(Counter)

高阶组件还可以扩展原组件的props属性，如下所示：

const BaseActivity (title) => (WrappedComponent) => {
  return class extends Component {
    render() {
      const newProps = {
          id: Math.random().toString(8)
      }
      return (
        
          {title}
          
        
      )
    }
  }
}

看下输出的react dom

高阶组件的缺点

高阶组件也有一系列的缺点，首先是被包裹组件的静态方法会消失，这其实也是很好理解的，我们将组件当做参数传入函数中，返回的已经不是原来的组件，而是一个新的组件，原来的静态方法自然就不存在了。如果需要保留，我们可以手动将原组件的方法拷贝给新的组件，或者使用hoist-non-react-statics之类的库来进行拷贝。

结语

高阶函数对于初学者来说可能不太好理解，但当你深入其中，了解其中的原理之后，我们可以使用高阶函数来完成很多的工作。

如果喜欢就给个Star吧，^_^

GPU云服务器云服务器高阶组件高阶函数高阶 php高阶

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

转载请注明本文地址：https://www.ucloud.cn/yun/93755.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 高阶组件

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

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

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

cncoder 2019-08-26 13:35 评论0 收藏0
七进七出React高阶组件

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

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