React高阶组件三部曲

一、高阶组件介绍

• 函数可以作为参数被传递（例如setTimeout())
• 函数可以作为返回值被输出

function foo(x){
    return function(){
    return x;
    }
}

举个栗子：时间函数的应用

1、setTimeout：隔一段时间执行一段js代码的函数（只执行一次）

2、setInterval：每隔一段时间就执行一次（多次执行）

举个栗子2:ajax请求

$.get('/api/getTime',function(){
    console.log('获取成功')
}

前面是请求地址，后面是回调函数

高阶组件基本概念

• 高阶组件就是接受一个组件作为参数并返回一个新组件的函数
• 高阶组件是一个函数，并不是组件

二、高阶组件实现

编写高阶组件

1. 实现一个普通组件
2. 将普通组件使用函数包裹

使用高阶组件

1、higherOrderComponent(WrappedComponent);
2、@higherOrderComponent 装饰器模式

注意：
使用装饰器 npm run eject
需要安装依赖npm install babel-preset-stage-2 --save-dev
另一个依赖npm install babel-preset-react-native-stage-0 --save-dev
配置根目录.babelrc文件
"presets":[react-native-stage-0/decorator-support]

三、高阶组件应用

代理方式的高阶组件

概念： 返回的新组件类直接继承自React.Component类，新组件扮演的角色传入参数组件的一个代理，在新组件的render函数中，将被包裹组件渲染出来，除了高阶组件自己要做的工作，其余功能全部转手给了被包裹组件。

应用：

• 操作props
• 抽取状态
• 访问ref
• 包装组件

继承方式的高阶组件

概念： 采用继承关联作为参数的组件和返回的组件，假如传入的组件参数是WrappedComponent，那么返回的组件就直接继承自WrappedComponent。

应用：

• 操纵props
• 操纵生命周期函数

高级组件显示名

• getDisplayName