【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 {  
  // ...  
} 

（编辑：湖南网）

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