useCallback против методов класса [Сравнение производительности] - PullRequest
Новая
       5

useCallback против методов класса [Сравнение производительности]

2 голосов
/ 21 июня 2019

Я недавно начал использовать хуки и переносил существующие компоненты класса на хуки.Среди нескольких преимуществ использования хуков, один аспект, который я не мог понять, это то, как передаются обратные вызовы.

В хуках вводится useCallback, который обеспечивает запомненный обратный вызов, так что при каждом повторном рендеринге не нужно создавать новый метод без необходимости.,Но все же, пройдя настройку API , я вижу, что для каждого рендера он по-прежнему много делает.

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

Пример кода для сравнения: 

/**
 * Hooks
 */

function Test() {
  const handleCallback = React.useCallback(() => {
    /**
     * Callback handler implementation
     */
  }, [/** deps */]);

  return <ChildComponent callback={handleCallback} />;
}


/**
 * Class API
 */
class Test extends React.Component {
  handleCallback = () => {
    /**
     * Callback handler implementation
     */
  };

  render() {
    return <ChildComponent callback={this.handleCallback} />;
  }
}

Цитирование из документов :

Хуки позволяют упорядочить побочные эффекты в компоненте по тем, с чем они связаны (например, добавление и удаление подписки), вместо принудительного разделения на основе методов жизненного цикла.

  • Достигнут ли этот перфоманс ожидаемый компромисс между наличием всех фигур в одном месте?

  • Был бы сценарий, в котором вы бы использовали встроенный обратный вызов, так как это всегда приводило бы к повторному рендерингу дочерних элементов,В этом случае useCallback почти всегда не требуется ?

...