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 相关文章推荐
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
浅谈React 属性和状态的一些总结
Nov 21 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
JavaScript函数基础详解
Feb 03 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
如何使用less实现随机下雪动画详解
Jan 02 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
基于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
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php简单smarty入门程序实例
2015/06/11 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JS获取html元素的标记名实现方法
2016/10/08 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
JavaScript中BOM对象原理与用法分析
2019/07/09 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python记录详细调用堆栈日志的方法
2015/05/05 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python获取统计自己的qq群成员信息的方法
2019/11/15 Python
Python算法中的时间复杂度问题
2019/11/19 Python
tensorflow的ckpt及pb模型持久化方式及转化详解
2020/02/12 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
pandas按条件筛选数据的实现
2021/02/20 Python
.NET面试问题集
2015/12/08 面试题
个人事迹材料怎么写
2014/12/30 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
获奖感言范文
2015/07/31 职场文书
python实现层次聚类的方法
2021/11/01 Python