Question

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

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

根据我的知识，他们都在做同样的事情，他们正在每个() => this.foo()电话上创建一个新功能render()。有人说，curry函数版本由编译器缓存和优化，因此与内联版本相比有一个好处。我认为它是完全相同的东西，写这个的人想隐藏内联函数与该表达式。

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>
  }
}

我做了一些谷歌搜索，但找不到声明的证明/反对，你觉得伙计们怎么样？

Answer 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>
  }
}

Curried函数是否被缓存？

1 个答案: