React 高阶组件入门介绍


Posted in Javascript onJanuary 11, 2018

高阶组件的定义

HoC 不属于 React 的 API,它是一种实现模式,本质上是一个函数,接受一个或多个 React 组件作为参数,返回一个全新的 React 组件,而不是改造现有的组件,这样的组件被称为高阶组件。开发过程中,有的功能需要在多个组件类复用时,这时可以创建一个 Hoc。

基本用法

包裹方式

const HoC = (WrappendComponent) => {
 const WrappingComponent = (props) => (
  <div className="container">
   <WrappendComponent {...props} />
  </div>
 );
 return WrappingComponent;
};

上述代码中,接受 WrappendComponent 作为参数,此参数就是将要被 HoC 包装的普通组件,在 render 中包裹一个 div,赋予它 className 属性,最终产生的 WrappingComponent 和 传入的 WrappendComponent 是两个完全不同的组件。

在 WrappingComponent 中,可以读取、添加、编辑、删除传给 WrappendComponent 的 props,也可以用其它元素包裹 WrappendComponent,用来实现封装样式、添加布局或其它操作。

组合方式

const HoC = (WrappedComponent, LoginView) => {
 const WrappingComponent = () => {
  const {user} = this.props; 
  if (user) {
   return <WrappedComponent {...this.props} />
  } else {
   return <LoginView {...this.props} />
  }
 };
 return WrappingComponent;
};

上述代码中有两个组件,WrappedComponent 和 LoginView,如果传入的 props 中存在 user,则正常显示的 WrappedComponent 组件,否则显示 LoginView 组件,让用户去登录。HoC 传递的参数可以为多个,传递多个组件定制新组件的行为,例如用户登录状态下显示主页面,未登录显示登录界面;在渲染列表时,传入 List 和 Loading 组件,为新组件添加加载中的行为。

继承方式

const HoC = (WrappendComponent) => {
 class WrappingComponent extends WrappendComponent {
  render() (
   const {user, ...otherProps} = this.props;
   this.props = otherProps;
   return super.render();
  }
 }
 return WrappingComponent;
};

WrappingComponent 是一个新组件,它继承自 WrappendComponent,共享父级的函数和属性。可以使用 super.render() 或者 super.componentWillUpdate() 调用父级的生命周期函数,但是这样会让两个组件耦合在一起,降低组件的复用性。

React 中对组件的封装是按照最小可用单元的思想来进行封装的,理想情况下,一个组件只做一件事情,符合 OOP 中的单一职责原则。如果需要对组件的功能增强,通过组合的方式或者添加代码的方式对组件进行增强,而不是修改原有的代码。

注意事项

不要在 render 函数中使用高阶组件

render() {
 // 每一次render函数调用都会创建一个新的EnhancedComponent实例
 // EnhancedComponent1 !== EnhancedComponent2
 const EnhancedComponent = enhance(MyComponent);
 // 每一次都会使子对象树完全被卸载或移除
 return <EnhancedComponent />;
}

React 中的 diff 算法会比较新旧子对象树,确定是否更新现有的子对象树或丢掉现有的子树并重新挂载。

必须将静态方法做拷贝

// 定义静态方法
WrappedComponent.staticMethod = function() {/*...*/}
// 使用高阶组件
const EnhancedComponent = enhance(WrappedComponent);

// 增强型组件没有静态方法
typeof EnhancedComponent.staticMethod === 'undefined' // true

Refs属性不能传递

HoC中指定的 ref,并不会传递到子组件,需要通过回调函数使用 props 传递。

参考链接

高阶组件

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

Javascript 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
在html页面中包含共享页面的方法
Oct 24 Javascript
javascript 无提示关闭窗口脚本
Aug 17 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JavaScript实现下拉菜单的显示和隐藏
Jan 05 Javascript
javascript显示上周、上个月日期的处理方法
Feb 03 Javascript
详解AngularJS 模态对话框
Apr 07 Javascript
详解JS获取HTML DOM元素的8种方法
Jun 17 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
4个顶级JavaScript高级文本编辑器
Oct 10 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
javascript实现时间日期的格式化的方法汇总
Aug 06 Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 #Javascript
Router解决跨模块下的页面跳转示例
Jan 11 #Javascript
vuex 使用文档小结篇
Jan 11 #Javascript
js判断传入时间和当前时间大小实例(超简单)
Jan 11 #Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
Jan 11 #Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 #Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 #Javascript
You might like
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
PHP获取IP地址所在地信息的实例(使用纯真IP数据库qqwry.dat)
2016/11/15 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
Javascript中的数学函数
2007/04/04 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
jQuery学习总结之元素的相对定位和选择器(持续更新)
2011/04/26 Javascript
JavaScript常用全局属性与方法记录积累
2013/07/03 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
JS实现从网页顶部掉下弹出层效果的方法
2015/08/06 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[33:39]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第二局
2016/02/27 DOTA
python实现文件名批量替换和内容替换
2014/03/20 Python
python 换位密码算法的实例详解
2017/07/19 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
使用Python实现企业微信的自动打卡功能
2019/04/30 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
财务经理岗位职责
2013/11/09 职场文书
前台接待员岗位职责
2014/01/02 职场文书
安全标准化汇报材料
2014/02/03 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
干部考核评语
2014/04/29 职场文书
学习张林森心得体会
2014/09/10 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
导游词之吉林吉塔
2019/11/11 职场文书