React学习笔记之高阶组件应用


Posted in Javascript onJune 02, 2018

是什么

高阶组件是一个函数,能够接受一个组件并返回一个新的组件。没有任何副作用。

为什么用

封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用。

如何用

//hoc为我们的高阶组件,可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7,如:let hocHello = hoc(Hello),只是es7的语法更优雅一些。
//高阶组件可以叠加使用,可以对一个组件使用多个高阶组件
@hoc       
class Hello extends React.Component {
 //
}

如何实现

属性代理

下面的例子是最简单的一个实现

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}

function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}

作用:操作prop,refs获取组件实例

注意事项:静态方法无法传递,必须手动复制;refs无法传递。

反向继承

下面的例子是最简单的一个实现

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}

作用: 操作state;渲染劫持(操作它的render函数)

注意事项:通过继承ImportComponent,除了一些静态方法,包括生命周期,state,各种function,我们都可以得到。

原则

  1. 不要修改原组件,高阶组件只是通过组合的方式将子组件包装在容器组件中,是一个无副作用的纯函数。
  2. 不要在render方法内部使用高阶组件。
  3. 高阶组件可以向组件添加功能,但是不应该大幅度地改变功能。
  4. 为了方便调试,选择一个显示名称,表示它是高阶组件的结果。

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

Javascript 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
jQuery的deferred对象详解
Nov 12 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
JavaScript之DOM_动力节点Java学院整理
Jul 03 Javascript
vue+axios 前端实现的常用拦截的代码示例
Aug 23 Javascript
javascript实现弹出层效果
Dec 10 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
浅谈node中的cluster集群
Jun 02 #Javascript
详解AngularJS 过滤器的使用
Jun 02 #Javascript
简化vuex的状态管理方案的方法
Jun 02 #Javascript
深入了解javascript 数组的sort方法
Jun 01 #Javascript
js 数组详细操作方法及解析合集
Jun 01 #Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 #Javascript
一个简单的node.js界面实现方法
Jun 01 #Javascript
You might like
利用PHP创建动态图像
2006/10/09 PHP
PHP 日常开发小技巧
2009/09/23 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
nodejs 后缀名判断限制代码
2011/03/31 NodeJs
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
原生js实现查找/添加/删除/指定元素的class
2013/04/12 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jquery移动节点实例
2015/01/14 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
Vue.js实战之组件的进阶
2017/04/04 Javascript
ES6新特性七:数组的扩充详解
2017/04/21 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
使用element-ui table expand展开行实现手风琴效果
2019/03/15 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
Python输出各行命令详解
2018/02/01 Python
python3爬虫之设计签名小程序
2018/06/19 Python
django用户登录和注销的实现方法
2018/07/16 Python
Python模块的加载讲解
2019/01/15 Python
python实现基于朴素贝叶斯的垃圾分类算法
2019/07/09 Python
pymysql 开启调试模式的实现
2019/09/24 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
高中生学习的自我评价
2013/12/14 职场文书
法学个人求职信范文
2014/01/27 职场文书
优秀通讯员事迹材料
2014/01/28 职场文书
洗发水广告词
2014/03/13 职场文书
水利水电专业自荐信
2014/07/08 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书
党小组评议意见
2015/06/02 职场文书
亮剑精神观后感
2015/06/05 职场文书
科普 | 业余无线电知识-波段篇
2022/02/18 无线电
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server