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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
vue el-table实现自定义表头
Dec 11 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获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js下用层来实现select的title提示属性
2010/02/23 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
JS获取时间的方法
2015/01/21 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
2016/05/26 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
js获取ip和地区
2017/03/10 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
微信小程序开发之左右分栏效果的实例代码
2019/05/20 Javascript
介绍Python中的fabs()方法的使用
2015/05/14 Python
python-str,list,set间的转换实例
2018/06/27 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
python 判断三个数字中的最大值实例代码
2019/07/24 Python
Python 处理文件的几种方式
2019/08/23 Python
python 日志模块 日志等级设置失效的解决方案
2020/05/26 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
华为慧通面试题
2012/09/11 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
关于母亲节的感言
2014/02/04 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
综艺节目策划方案
2014/06/13 职场文书
工作年限证明模板
2014/11/01 职场文书
酒店前台岗位职责
2015/04/16 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python