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

Question

Я пытаюсь использовать React Hooks все время, поэтому я избегаю использования классов.Во время недавнего обзора кода один из моих коллег порекомендовал мне переписать свой компонент, используя компонент класса вместо функционального компонента, который использовал Hooks.Он утверждал, что каждый раз, когда мой компонент визуализируется, все «внутренние функции-члены» создаются снова, и это может привести к снижению производительности.У меня сложилось впечатление, что команда React хочет, чтобы люди по возможности отказывались от уроков.Неужели наличие множества вспомогательных функций внутри функционального компонента без сохранения состояния приведет к снижению производительности?

const Foo = () => {
   const helper = () => {
      doSomething()
   }
   return (<View />)
 }

OR

class Bar extends Component {
   helper = () => {
      doSomething()
   }
   render() {
      return (<View/>)
   }
}

Answer 1

В вашем первом примере новый функциональный объект должен создаваться при каждом запуске Foo. Так что отток памяти вам не нужен, если движок JavaScript не сможет его оптимизировать. (Как и почти все проблемы с производительностью, конечно, о таких вещах нужно беспокоиться, если у вас есть проблемы с производительностью. Хотя, если вы делаете это с множеством мелких компонентов, это может сложиться.)

В зависимости от того, что нужно helper, вы можете определить его вне SFC и просто использовать его внутри него.

// I'm assuming this is in a module, so it's not a global
const helper = () => {
    doSomething()
}

const Foo = () => {
    // Presumably you use `helper` here somewhere
    return (<View />)
}

Если по какой-то причине вы не используете модули (!!), чтобы избежать того, чтобы helper был глобальным, вы должны сделать обычную область видимости. Может быть:

const Foo = (() => {
    const helper = () => {
        doSomething()
    }

    return () => {
        // Presumably you use `helper` here somewhere
        return (<View />)
    }
})()

Answer 2

Вспомогательная функция, которую вы написали, будет обновляться каждый раз, когда ваш компонент рендерится.Вам не нужно определять свою вспомогательную функцию внутри компонента, как вы это делаете.Если вы действительно хотите использовать React Hooks в своем проекте, посмотрите на крючки, которые будут соответствовать вашим потребностям в различных ситуациях.Например, вы можете использовать useCallback, если вам нужна вспомогательная функция для вызова некоторых действий при взаимодействии с пользователем.Ваш код будет выглядеть так:

const Foo = () => {
   const helper = useCallback(() => {
      doSomething()
   }, []);
   return (<View />)
 }

Эта функция будет создана только при первом рендере.Если ваша функция зависит от некоторых реквизитов, вы можете передать эти реквизиты в качестве входных значений в useCallback.Этот обратный вызов будет воссоздан, когда что-то изменится.Например:

const Foo = (props) => {
   const helper = useCallback(() => {
      doSomething(props.id);
   }, [props.id]);
   return (<View />)
 }

Answer 3

Ваш коллега технически прав, что внутренние функции будут создаваться и привязываться при каждом вызове к render(), но если вы не выполняете очень большое количество компонентов очень часто (в результате быстрых изменений состояния или чего-то еще),общая стоимость должна быть незначительной.