翻译 | React高阶组件

作者｜zzbozheng

原文｜http://imweb.io/topic/5907038a2739bbed32f60dad

高阶组件是对React代码进行更高层次重构的好方法，如果你想精简你的state和生命周期方法，那么高阶组件可以帮助你提取出可重用的函数。

什么是高阶组件？名字来源于高阶函数，一个函数可以接收另一个函数作为参数，并且有可能在执行后返回一个函数，这种函数就称之为高阶函数。你可能使用过高阶函数但是并没有真正意识到,例如Array.forEach、Array.map、setTimeout这些都是高阶函数，我们都知道这些函数全都是接受一个函数作为参数，当新的函数返回时，他已经发生了变化。

那么，什么又是高阶组件呢？其实就是把一个组件接收一个组件作为参数，并返回包裹后的组件。既然可以把另一个组件作为参数，那意味着他必须是一个函数。

我们先来看一个典型的高阶组件：

提取共享的state

如果有两个组件都需要加载同样的数据，那么他们会有相同的 componentDidMount 函数。

1.找出重复的代码

每个组件中constructor 和 componentDidMount都干着同样的事情，另外，在数据拉取时都会显示Loading... 文案，那么我们应该思考如何使用高阶组件来提取这些方法。

2.迁移重复的代码到高阶组件

在 BookLoader 高阶组件中处理 book state，并且作为prop传递给已包裹的组件，使用相同的办法来处理Loading state，我们需要做的是拉取state，并且更新到组件中去。

3.包裹组件，并且使用props替换state

把 BookDetails 和 BookSummary组件应用 到新的BookLoader高阶组件中去：

4.尽可能地简化

在你完成高阶组件迁移后，应该更进一步地简化你的代码，这个例子的组件比较简单，他们可以变成普通的功能：

扫码下方二维码，

随时关注更多前端干货文章！

▼

微信：IMWebTech