React 剖析高阶组件以及组件补充详解

在软件构建方面，React 是一个强大的盟友。它促进了简单易懂的应用程序的构建，鼓励使用组件组成模式，并在处理状态时提供了支持。高阶组件是进一步改进这种模式的一种巧妙手段，因为它允许一个组件组合与另一个组件的功能。这是一个赋予组件新的功能的好方法，同时还保留了原组件的全部功能。

什么是高阶组件呢？想必很多同学都听说过，也用过高阶函数，它们的非常相似，所以我们可以先来回顾一下什么是高阶函数。 高阶函数的维基百科 definition：至少满足以下条件的一种函数：

• 定义一个新函数。
• 接收一个或多个函数作为参数。
• 将此函数应用到其他函数或值上。
• 返回另一个函数。

看起来和高阶组件非常像，我们来思考一个高阶组件是如何工作的。如果我们想要一个功能，它能够复制一个组件，但是只渲染这个组件一半的部分，然后再创建一个功能，这个函数能够复制一个组件，但是只渲染这个组件一半的部分，那么我们来看看通过高阶组件来实现这个问题的代码是怎么写的。

function half (Comp) {
  return (props) {
    return <Comp {...props} half={true} />
  }
}

高阶组件最常见的作用就是共享底层组件的状态。考虑一个典型的 todo 应用，其中有一列项目以及一个添加 new todo 项目的输入域。我们将会把这个应用分解成两个组件：

• Todo，用来渲染 todo 的列表。
• TodoForm，用来渲染添加 new todo 的输入域。

当然，这两个组件会知道关于各自的 todo 的一些东西，但是与其将信息复制来复制去，我们希望将 todo 的信息封装到一个顶层组件，然后让 Todo 和 TodoForm 这个组件通过该组件来访问这个 todo。

高阶组件的第一个参数是我们希望把功能应用到组件之上的，这个组件被称作组件工厂。组件工厂接收组件，然后返回一个新的组件。组件工厂需要与所返回的组件签名相匹配。

高阶组件，在React中的应用非常广泛，它是一种高效，可维护的方法论组件组合在一起，它最大的优点在于，它十分容易实现，也容易理解。当你想给你的项目中增加一个功能时，它绝对是你不错的选择。

最后，我们还可以给高阶组件传递参数。

function half (Comp) {
  return (props) {
    return <Comp {...props} half={true} />
  }
}

函数 half 接收一个参数，props，然后将 props 中 half 这个键的 value，传递给 Comp 这个组件。