# 高级函数

1. 函数可以作为 参数被传递

2. 函数可以作为返回值输出

# 高阶组件

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

2. 高阶组件是一个函数，并不是一个组件

## 编写高阶组件

1. 实现一个普通组件

2. 将普通组件使用函数包裹

```

function d(WrapperComponent){

return class D extends Component {

render() {

return (

<div>

<WrapperComponent></WrapperComponent>

</div>

);

}

}

}

export default d;

```

## 使用高阶组件

1.  示例 （简单使用，其他方式比较繁琐忽略）

```

import React, { Component } from "react";

// import A from "./A";

import d from "./D";

class C extends Component {

  render() {

    return <div>C组件</div>;

  }

}

// export default A(C);

export default d(C);

```

2. 注解使用： @  装饰器注解

## 高级组件应用

### 代理方式的高阶组件: 尽量使用代理

返回的新组件类直接继承自 React.Component

1. 操纵prop

2. 抽取状态

3. 访问ref

4. 包装组件

### 继承方式的高阶组件

采用继承关联作为参数的组件和返回的组件，假如传入的组件参数是WrappedComponent ,

那么返回的组件就直接继承自 WrappedComponent 

1. 操纵prop（没有代理组件功能强，很少用）

2. 操纵生命周期函数

### 高阶组件显示名

用于调试输出显示, 可以在浏览器安装React 插件进行调试来方便使用