【React深入】从Mixin到HOC再到Hook

上面的示例代码都写的是如何声明一个HOC，HOC实际上是一个函数，所以我们将要增强的组件作为参数调用HOC函数，得到增强后的组件。

class myComponent extends Component {  
  render() {  
    return (<span>原组件</span>)  
  }  
}  
export default inheritHOC(myComponent); 

compose

在实际应用中，一个组件可能被多个HOC增强，我们使用的是被所有的HOC增强后的组件，借用一张装饰模式的图来说明，可能更容易理解：

假设现在我们有logger，visible，style等多个HOC，现在要同时增强一个Input组件：

logger(visible(style(Input))) 

这种代码非常的难以阅读，我们可以手动封装一个简单的函数组合工具，将写法改写如下：

const compose = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)));  
compose(logger,visible,style)(Input); 

compose函数返回一个所有函数组合后的函数，compose(f, g, h) 和 (...args) => f(g(h(...args)))是一样的。

很多第三方库都提供了类似compose的函数，例如lodash.flowRight，Redux提供的combineReducers函数等。

Decorators

我们还可以借助ES7为我们提供的Decorators来让我们的写法变的更加优雅：

@logger  
@visible  
@style  
class Input extends Component {  
  // ...  
} 

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!