カレー関数はキャッシュされていますか？

Question

カレー機能コンパイラ（いくつかの男）によってキャッシュされます

以下このコンポーネントは、二つのボタンがあり、一つは、の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> 
    } 
} 

私はいくつかのグーグルをしましたが、文の証明/反証を見つけるcould't、あなたは人をどう思いますか？

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