Javascript 链接或组合多个文件的好方法”；修补程序“；？

这是React中非常常见的模式，我们“修补”组件，它将接收自定义属性：

export default gimmeMahProps(someRandomSettings)(MyComponent);

示例：

// Redux
connect(stateMapper, dispatchMapper)(MyComponent);

// Material UI
withStyles(myStyles)(MyComponent);

当我们拥有越来越多的这些功能时，这可能会变得非常混乱：

// messy nested function calls with only two of those patchers
export default connect(stateMapper, dispatchMapper)(withStyles(myStyles)(MyComponent));

这就是我现在所做的，以避免嵌套函数调用的金字塔：

export default [
    connect(stateMapper, dispatchMapper),
    withStyles(myStyles)
].reduce((comp, patcher) => patcher(comp), MyComponent);  // kind of a hack

---

更具可读性，但我正在寻找一种更简单的方法来链接或组合它们。也许我遗漏了什么，但是React提供了实现这一点的API吗？

使用JavaScript装饰器怎么样

@connect(stateMapper, dispatchMapper)
@withStyles(myStyles)
export default class App extends Component {
    ...

---

有一个很棒的库，名为，它提供了一些非常有用的常用装饰器，现在就可以使用了。它们通常允许使用非常有用的通用功能（例如，方法调用的计时、弃用警告、确保值是只读的），但使用了更简洁的decorator语法。

是的，它的名称是函数组合，函数编程中的基本“模式”之一（或者在任何语言中，函数都是一等公民，JavaScript也是如此）

你可以看看

或者，在我看来，最好选择Ramda的（从右到左的应用程序）或（从左到右的应用程序）。简而言之：

compose(fn1, fn2)(x) === fn1(fn2(x))
pipe(fn1, fn2) === fn2(fn1(x))

您的丑陋代码示例可以这样编写

const enhance = pipe(
  withStyles(myStyles),
  connect(stateMapper, dispatchMapper),
)

export default enhance(MyComponent)

---

另外，请注意，还有一个即将推出的语言功能，名为。

请参见“警告：装饰师仍然是第2阶段的提案，并且已经对其早期版本进行了重大更改（但它们有用吗）。我会等到装饰器最终确定后再使用它们，但谢谢你的建议。谢谢你的回答。

compose

函数非常方便，非常适合我的情况。如果管道运营商的建议被接受，那将非常棒，但现在

compose

函数就可以了。