浅谈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 相关文章推荐
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
js对象基础实例分析
Jan 13 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
vue实现员工信息录入功能
Jun 11 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
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
php中addslashes函数与sql防注入
2014/11/17 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Extjs Ajax 乱码问题解决方案
2009/04/15 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
js图片上传的封装代码
2017/08/01 Javascript
认识less和webstrom的less配置方法
2017/08/02 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
ES6学习教程之对象字面量详解
2017/10/09 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
2019/04/17 Javascript
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
人工神经网络算法知识点总结
2019/06/11 Python
德国、奥地利和瑞士最大的旅行和度假门户网站:HolidayCheck
2019/11/14 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
大学生演讲稿范文
2014/01/11 职场文书
铁路个人事迹材料
2014/01/30 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
统计工作个人总结
2015/03/03 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
HTML+CSS制作心跳特效的实现
2021/05/26 HTML / CSS