Curried Функции кэшируются?

Question

функции получает карри кэшируются компилятором (какой-то парень)

Этот компонент ниже имеет две кнопки, одна вызывает функцию, которая возвращает обработчик OnClick, другой делает то же самое, но встроенный.

По моим сведениям, обе делают то же самое, они создают новую функцию () => this.foo() на каждом вызове render(). Кто-то сказал, что версия функции в карманах кэшируется и оптимизируется компилятором, поэтому есть преимущество по сравнению с встроенной версией. Я думаю, что это то же самое, и тот, кто написал это, хотел скрыть встроенную функцию с этим выражением.

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