# 高級(jí)函數(shù)

1. 函數(shù)可以作為 參數(shù)被傳遞

2. 函數(shù)可以作為返回值輸出

# 高階組件

1. 高階組件就是接受一個(gè)組件作為參數(shù)并返回一個(gè)新組件的函數(shù)

2. 高階組件是一個(gè)函數(shù)，并不是一個(gè)組件

## 編寫高階組件

1. 實(shí)現(xiàn)一個(gè)普通組件

2. 將普通組件使用函數(shù)包裹

```

function d(WrapperComponent){

return class D extends Component {

render() {

return (

<div>

<WrapperComponent></WrapperComponent>

</div>

);

}

}

}

export default d;

```

## 使用高階組件

1.? 示例 （簡(jiǎn)單使用，其他方式比較繁瑣忽略）

```

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. 注解使用： @? 裝飾器注解

## 高級(jí)組件應(yīng)用

### 代理方式的高階組件: 盡量使用代理

返回的新組件類直接繼承自 React.Component

1. 操縱prop

2. 抽取狀態(tài)

3. 訪問(wèn)ref

4. 包裝組件

### 繼承方式的高階組件

采用繼承關(guān)聯(lián)作為參數(shù)的組件和返回的組件，假如傳入的組件參數(shù)是WrappedComponent ,

那么返回的組件就直接繼承自 WrappedComponent?

1. 操縱prop（沒(méi)有代理組件功能強(qiáng)，很少用）

2. 操縱生命周期函數(shù)

### 高階組件顯示名

用于調(diào)試輸出顯示, 可以在瀏覽器安裝React 插件進(jìn)行調(diào)試來(lái)方便使用