Curried 函数被缓存？

Question

Curried functions gets cached by the compiler (some guy)

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

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

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

我进行了一些谷歌搜索，但找不到 proof/disproof 声明，你们觉得伙计们怎么样？

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 函数被缓存？

Curried Functions are cached?

javascript

jsx

reactjs

ecmascript-next