浅谈React高阶组件


Posted in Javascript onMarch 28, 2018

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

那什么是高级组件?首先你得先了解请求ES6中的class只是语法糖,本质还是原型继承。能够更好的进行说明,我们将不会修改组件的代码。而是通过提供一些能够包裹组件的组件, 并通过一些额外的功能来增强组件。这样的组件我们称之为高阶组件(Higher-Order Component)。

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 (
    <section>
     <div>我的包裹组件</div>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

组件接受一个被包裹的组件作为参数,返回了一个经过处理的匿名组件。

在其他组件中使用这个高阶组件

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 (
   <div className="activity">
    <div className="activity-content" style={{ width, height }}>
     <button className="btn">参加活动</button>
    </div>
   </div>
  )
 }
}

export default BaseActivity(Example);

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

浅谈React高阶组件

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

参数

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

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

在Example中这样export

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

我们看下输出的react dom

浅谈React高阶组件

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

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

const BaseActivity (title) => (WrappedComponent) => {
 return class extends Component {
  render() {
   return (
    <section>
     <div>{title}</div>
     <WrappedComponent />
    </section>
    
   )
  }
 }
}

在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 (
    <section>
     <div>{title}</div>
     <WrappedComponent {...this.props} {...newProps}/>
    </section>
   )
  }
 }
}

看下输出的react dom

浅谈React高阶组件

高阶组件的缺点

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

结语

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
Jquery ajax基础教程
Nov 20 Javascript
谈谈jQuery Ajax用法详解
Nov 27 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
Feb 23 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
微信小程序跨页面传递data数据方法解析
Dec 13 Javascript
vue数据控制视图源码解析
Mar 28 #Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
vue 开发一个按钮组件的示例代码
Mar 27 #Javascript
vue-cli脚手架-bulid下的配置文件
Mar 27 #Javascript
vue2中使用less简易教程
Mar 27 #Javascript
浅谈Vue内置component组件的应用场景
Mar 27 #Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
php无限分类使用concat如何实现
2015/11/05 PHP
PHP编写简单的App接口
2016/08/28 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
PHP超级全局变量【$GLOBALS,$_SERVER,$_REQUEST等】用法实例分析
2019/12/11 PHP
什么是JavaScript
2009/08/13 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
jQuery中:image选择器用法实例
2015/01/03 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
公司庆典活动邀请函
2014/01/09 职场文书
师范学院美术系毕业生自我鉴定
2014/01/29 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
环保口号大全
2014/06/12 职场文书
十佳青年事迹材料
2014/08/21 职场文书
城市规划应届生推荐信
2014/09/08 职场文书
户籍证明格式
2014/09/15 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书