咖喱函数被缓存了吗？答案

【问题标题】：Curried Functions are cached?咖喱函数被缓存了吗？
【发布时间】：2017-06-28 08:04:13
【问题描述】：

Curried 函数被编译器缓存（some guy）

下面的这个组件有两个按钮，一个调用返回 onClick 处理程序的函数，另一个执行相同的操作，但内联。

据我所知，两者都在做同样的事情，他们在每个 render() 调用上创建一个新函数 () => this.foo()。有人说柯里化函数版本是由编译器缓存和优化的，所以相比内联版本有一个好处。我认为它完全一样，写这篇文章的人想用那个表达式隐藏一个内联函数。

class MyComponent extends Component {
  foo = () => console.log('fooo')

  getFunction = callback => {
    return () => callback();
  }

  render() {
    return <div>
      <button onClick={this.getFunction(this.foo)}>curried function</button>
      <button onClick={() => this.foo()}>inline function</button>
    </div>
  }
}

我做了一些谷歌搜索，但找不到该声明的证据/反驳，你们怎么看？

【问题讨论】：

我可能遗漏了一些东西，但是......这里的柯里化在哪里？此外，这不是 JavaScript（也不是 es6）——您可能还想用 jsx 标记？
在 getFunction() 中？
来自维基百科：“在数学和计算机科学中，柯里化是一种将接受多个参数（或参数元组）的函数的求值转换为函数序列的技术，每个函数都有一个单论”。你的foo 是一个无效函数，所以我无法理解你认为currying 是如何完成的。您是否使用了“currying”的其他含义？
有一个es6标签
有。我是说这不是 ES6。 return <div>...</div> 不在 ES6 规范中（但在 JSX 中）。同时，使用= 声明方法是，AFAIK，既不是 ES6 也不是 JSX。

标签： javascript reactjs jsx ecmascript-next

【解决方案1】：

不，他们没有做同样的事情； getFunction 确实在没有 this 上下文的情况下调用了它的回调。当然，对于特定的foo 箭头函数，它根本不重要。

是的，这两种方法都会在每次 render 调用时创建一个新函数。相应闭包的代码会被缓存，但函数对象及其词法上下文不会被缓存。

为避免这种情况，请使用 foo 函数本身（不带任何包装器），它在构造函数中只创建一次：

class MyComponent extends Component {
  constructor(...args) {
    super(...args);
    this.foo = (e) => console.log('fooo');
  }
  render() {
    return <div>
      <button onClick={this.foo}>cached function</button>
    </div>
  }
}

【讨论】：