什么是高阶组件?

高阶组件就是接受一个组件作为参数并返回一个新组件的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意。同时这里强调一点高阶组件本身并不是 React API。它只是一种模式,这种模式是由React自身的组合性质必然产生的。更加通俗的讲,高阶组件通过包裹(wrapped)被传入的React组件,经过一系列处理,最终返回一个相对增强(enhanced)的 React 组件,供其他组件调用。

react中获取的ref是什么?

  • 如果ref写在组件上,那么获取的是 组件的实例对象;
  • 如果ref写在组件内的标签上(div,span等),获取的相应的DOM节点那么可知本文中获取的高阶组件的ref所指的是组件的实例对象即 子组件的this

获取方式:

@withRouter
export default class childComponent extends Component {
constructor(props) {
super(props);
this.state = {};
const { getInstance } = props;
if (typeof getInstance === 'function') {
getInstance(this); // 在这里把this暴露给`parentComponent`
}
}
render() {
return (<div>this is childComponent</div>)
}
}
@withRouter
export default class parentComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
render () {
return (
<childComponent
ref={(withRouter) => { this.childCpWrapper = withRouter; }} // 这里获取的是`withRouter`组件,一般没啥用,这里写出来只是为了对比
getInstance={(childCp) => { this.childCp = childCp; }} // 这里通过`getInstance`传一个回调函数接收`childComponent`实例即可
/>
);
}
}

下面将上面的方法优化一下,单独写一个类来获取

// 只做一件事,把`WrappedComponent`回传个`getInstance`(如果有的话)
export default (WrappedComponent) => {
return class withRef extends Component {
static displayName = `withRef(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
render() {
// 这里重新定义一个props的原因是:
// 你直接去修改this.props.ref在react开发模式下会报错,不允许你去修改
const props = {
...this.props,
};
const { getInstance } = props;
if (typeof getInstance === 'function') {
// 在这里把getInstance赋值给ref,
// 传给`WrappedComponent`,这样就getInstance能获取到`WrappedComponent`实例
props.ref = getInstance;
}
return (
<WrappedComponent {...props} />
);
}
};
}; // 如何使用?
@withRouter
@withRef // 这样使用是不是方便多了,注意:这句必须写在最接近`childComponent`的地方
export default class childComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (<div>this is childComponent</div>)
}
}
@withRouter
export default class parentComponent extends Component {
constructor(props) {
super(props);
this.state = {};
}
render () {
return (
<childComponent
// 这里获取的是`withRouter`组件,一般没啥用,这里写出来只是为了对比
ref={(withRouter) => { this.childCpWrapper = withRouter; }}
// 这里通过`getInstance`传一个回调函数接收`childComponent`实例即可
getInstance={(childCp) => { this.childCp = childCp; }}
/>
);
}
}

获取react中高阶组件方法的更多相关文章

  1. 初识react中高阶组件

    高阶组件并不是一个组件,而是一个函数 这个函数返回值是一个组件,并且接受一个组件做为参数:并且返回一个新组件: function HighOC(WrapComponent){ //定义一个高阶组件 , ...

  2. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  3. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  4. 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理完成后的 React 组件.React 高阶组件在 React 生态中使用的非常频繁, ...

  5. 当初要是看了这篇,React高阶组件早会了

    当初要是看了这篇,React高阶组件早会了. 概况: 什么是高阶组件? 高阶部件是一种用于复用组件逻辑的高级技术,它并不是 React API的一部分,而是从React 演化而来的一种模式. 具体地说 ...

  6. react高阶组件的理解

    [高阶组件和函数式编程] function hello() { console.log('hello jason'); } function WrapperHello(fn) { return fun ...

  7. React高阶组件学习笔记

    高阶函数的基本概念: 函数可以作为参数被传递,函数可以作为函数值输出. 高阶组件基本概念: 高阶组件就说接受一个组件作为参数,并返回一个新组件的函数. 为什么需要高阶组件 多个组件都需要某个相同的功能 ...

  8. react高阶组件的一些运用

    今天学习了react高阶组件,刚接触react学习起来还是比较困难,和大家分享一下今天学习的知识吧,另外缺少的地方欢迎补充哈哈 高阶组件(Higher Order Components,简称:HOC) ...

  9. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

随机推荐

  1. reactV16理解

    在 V16 版本中引入了 Fiber 机制.这个机制一定程度上的影响了部分生命周期的调用,并且也引入了新的 2 个 API 来解决问题. 在之前的版本中,如果你拥有一个很复杂的复合组件,然后改动了最上 ...

  2. Tomcat启动慢的原因及解决方法

    Tomcat启动慢的原因及解决方法 在CentOS启动Tomcat时,启动过程很慢,需要几分钟,经过查看日志,发现耗时在这里:是session引起的随机数问题导致的.Tocmat的Session ID ...

  3. 以当前时间作为GUID的方法

    在C#中,系统提供了GUID类,用户可以通过该类来获得128位的唯一标识,但是该标识不具有可读性,很难把该GUID显示在界面上,以当前时间精确到毫秒来作为GUID是一个比较不错的做法,但是DateTi ...

  4. 2019-11-26-Resharper-去掉注释拼写

    title author date CreateTime categories Resharper 去掉注释拼写 lindexi 2019-11-26 8:42:5 +0800 2018-09-04 ...

  5. 十一、Boostrap-X-editable

    一.官网 http://vitalets.github.io/x-editable/index.html 二.实践 在jQuery中ajax配置项中的使用type与method的区别: type 和m ...

  6. Provider增删改查

    package com.fei.provider; import org.apache.ibatis.jdbc.SQL; import com.fei.domain.User; public clas ...

  7. 【04】Python 深拷贝浅拷贝 函数 递归 集合

    1 深拷贝浅拷贝 1.1 a==b与a is b的区别 a == b    比较两个对象的内容是否相等(可以是不同内存空间) a is b  比较a与b是否指向同一个内存地址,也就是a与b的id是否相 ...

  8. java: Set类及子类:TreeSet有序子类,HashSet无序子类:重复元素

    Set类及子类: TreeSet有序子类: HashSet无序(散列)子类 HashSet子类的内容是没有顺序的,单个元素也不会重复的(对象除外). Set<String> allSet ...

  9. nginx限制文件访问速率

    需求: 一个文件下载功能需要限制文件同时访问的并发数和当个连接的访问速率: 配置: 在http context内增加: limit_conn_zone $binary_remote_addr zone ...

  10. linux运维、架构之路-Git+Jenkins实现自动化部署

    一.Jenkins介绍          jenkins是一个用JAVA编写的开源的持续集成工具,运行在servlet容器中,支持软件配置管理(SCM)工具,可以执行基于APACHE ANT和APAC ...