<commit_before>---
layout:     post
title:      "React 进阶"
subtitle:   "高阶函数"
date:       2017-08-01 12:00:00
author:     "Ericteen"
header-img: "img/post-bg-03.jpg"
---
# 高阶组件

高阶组件是一个概念上很简单，却十分实用的东西，被大量的 React 相关的第三方库频繁使用。在前端业务开发当中，灵活使用高阶组件可以让你的代码更为优雅，灵活性和复用性也会更强。同时，了解高阶组件对我们理解各种 React 第三方库也有很大的帮助。

## [什么是高阶组件](https://reactjs.org/docs/higher-order-components.html)

>A higher-order component is a function that takes a component and returns a new component.
>高阶组件是一个函数，接收一个组件并返回一个新的组件。

```JavaScript
const EnhancedComponent = highOrderComponent(WrappedComponent)
```

高阶组件是一个函数而非组件，就像一个组件将 `props` 转换为 `UI`，高阶组件接收一个组件作为参数，返回一个新的组件。

进一步学习之前，我们先回顾一下 `new` 和构造函数之间的关系。

```JavaScript<commit_msg>补充HOC定义<commit_after>---
layout:     post
title:      "React 进阶"
subtitle:   "高阶函数"
date:       2017-08-01 12:00:00
author:     "Ericteen"
header-img: "img/post-bg-03.jpg"
---
# 高阶组件

高阶组件是一个概念上很简单，却十分实用的东西，被大量的 React 相关的第三方库频繁使用。在前端业务开发当中，灵活使用高阶组件可以让你的代码更为优雅，灵活性和复用性也会更强。同时，了解高阶组件对我们理解各种 React 第三方库也有很大的帮助。

## [什么是高阶组件](https://reactjs.org/docs/higher-order-components.html)

>A higher-order component is a function that takes a component and returns a new component.
>高阶组件是一个函数，接收一个组件并返回一个新的组件。

```JavaScript
const EnhancedComponent = highOrderComponent(WrappedComponent)
```

在 React 中，高阶组件是一种复用组件逻辑的技术。它是一个函数而非组件，就像一个组件将 `props` 转换为 `UI`，高阶组件接收一个组件作为参数，返回一个新的组件。

进一步学习之前，我们先回顾一下 `new` 和构造函数之间的关系。

```JavaScript
{'fraction_non_alphanumeric': 0.1227080394922426, 'fraction_numerical': 0.022566995768688293, 'mean_word_length': 5.661971830985915, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2219242', 'n_tokens_mistral': 829, 'n_tokens_neox': 884, 'n_words': 101}