Где объявить функцию для оптимизации использования класса ES6

Question

Я разрабатываю какое-то веб-приложение с использованием React, чтобы каждый, кто читает, мог понять, что происходит. Тем не менее, это, по сути, вопрос относительно оптимизации кода ES6 , а не React и того, что у вас есть.

TL; DR: Я знаю, что это никогда не будет иметь никакого значения, потому что все просто, но я интересно, в теории, каков наилучший подход? Что такое «хорошо» практический стандарт для объявления функций, которые будут использоваться в классе ES6 методы с наибольшей оптимизацией производительности?

Что было бы наиболее оптимальным местом для определения «вспомогательной» функции, которая используется одним из методов моего класса, например:

class Table extends Component {
    constructor() {
        super();
        this.instanceBasedFilter = function(){...}    // Option 1
    }
    state = {};
    render() {
        const { filterProp } = this.props;
        return (
            <React.Fragment>
                <table>
                    {this.filterMethod(filterProp)}
                </table>
            </React.Fragment>
        );
    }
    prototypeBasedFilter(){...}    // Option 2
    filterMethod = filter => {
        filter = filter || [];
        function methodBasedFilter(){...}    // Option 3
        filter.filter(/* need to pass a function here*/)
    };
}
function outsideBasedFilter(){...}    // Option 4

Итак, очевидно, что все они разные, в этом случае избежать недопустимо, мне просто интересно, какой подход будет считаться лучшим. Ради аргумента давайте не будем обращать внимания на возможность размещения помощника фильтра в другом файле .js, скажем, что он специфичен для этого компонента.

Мой взгляд на варианты приведен ниже, исправьте меня, если я ошибаюсь, и предложите вариант, который является наилучшей практикой, если вы его знаете.

Вариант 1:
Функциональный объект будет создаваться каждый раз, когда компонент создается и присоединяется к DOM, это может привести к умеренному количеству «созданий». С другой стороны, он будет занимать пространство памяти только до тех пор, пока компонент отображается, после удаления память освобождается, если я правильно понимаю сборщик мусора.

Вариант 2:
Один функциональный объект будет создан для использования со всеми компонентами, поэтому обработка выполняется только один раз, однако она будет храниться в памяти до тех пор, пока приложение работает.

Вариант 3:
Функциональный объект будет создаваться каждый раз, когда компонент обновляется, это может действительно оказаться много раз, с положительной стороны, хотя, как только рендеринг завершен, память освобождается, это то, что я хотел бы Интуитивно поймите, если бы я не думал об оптимизации, потому что я просто включил бы функцию стрелки и покончил бы с ней. Но это самые накладные расходы, нет?

Вариант 4:
Теперь, честно говоря, это больше всего меня заводит ... так как я не могу представить, как все это компилируется. Размещение объявления функции вне самого класса предоставляет его этому классу и его прототипу, но я понятия не имею, как его компилирует webpack / babel. Я бы сделал обоснованное предположение, что он похож на второй вариант с точки зрения оптимизации, так как я бы предположил, что он «удерживается в объеме» некоторой анонимной функции, которая обозначает модульную среду, то есть до тех пор, пока приложение ее запускает никогда не будет собрана, но также будет определена только один раз.

Итак, лучшая практика?