React, функциональные компоненты, компоненты-классы, хуки?

Question

[KBBS]

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

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.clickHandler = this.clickHandler.bind(this);
}
clickHandler() {
// Тут делаем что-нибудь полезное
}
render() {
return (
<div>
<p>{this.props.children}</p>
<button type="button" onClick={this.clickHandler}>Click me</button>
</div>
);
}
}

Но я вижу, что приверженцы функциональных компонентов пишут таким образом

function MyComponent(props) {
const clickHandler = () => {
// Тут делаем что-то полезное
};
return (
<div>
<p>{props.children}</p>
<button type="button" onClick={clickHandler}>Click me</button>
</div>
);
}

Примеры слишком упрощены. Но дело не в этом.
Не является ли второй пример менее продуктивным?
В первом случае clickHandler является методом, а во втором случае, он объявляется прямо в функции.
Разве у нас не будет пересоздаваться колбэк каждый раз, когда компонент перерисовывается заново? Например, когда изменились props.

И сюда же второй вопрос.
Относительно недавно в React завезли хуки.
В принципе, интересная штука. Теперь многие компоненты, которые требовали классов, можно делать функциональными.
Честно говоря, классы мне всё же кажутся более читабельными и лучше структурированными, но, наверное, тут всё дело вкуса.
И опять таки, насколько это всё продуктивно. С учётом того, что фактически вся логика переезжает в тело функции.
И что касается самих хуков. Ну с useState и useEffect всё понятно. А вот useCallback малость неосилил. Точнее, не уверен, что понял его правильно.
Какие области применения useCallback, в каких случаях его использовать и где это будет лишним?

Спасибо.

Answer 1

[Антон Спирин]

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

useCallback предотвращает обновление дочернего компонента, при передаче ему хандлера. Вызов useCallback(fn, deps) эквивалентен useMemo(() => fn, deps). При каждом обновлении родительского компонента без этой обертки возвращалась бы новая ссылка на функцию и инициировала бы обновление дочернего компонента. С useCallback будет возвращаться старая ссылка, пока не изменится хотя бы один из элементов массива deps.

Comments

[KBBS]

Спасибо за ответ.
А вот если вернуться к моему первому сообщению (примерам).
В конструкторе мы делаем this.clickHandler = this.clickHandler.bind(this);
Таким образом, в дочерний компонент мы будем передавать всегда одну и ту же ссылку на функцию.
А в варианте с функциональным компонентом, у нас функция (колбэк) будет пересоздаваться каждый раз, когда перерисовывается компонент. Т.е. в дочерний компонент мы будем каждый раз передавать заново созданный колбэк.
Но как я понял, если мы перепишем пример с useCallback, то мы этого избежим.
Стоит ли так делать? Или это уже будет излишней оптимизацией?

Answer 2

[Robur]

Последние лет 5 мало кто заморачивается на скорость/память и создают кучу лишних колбеков как в классах так и в функциональных компонентах. Все привыкли что табы в браузере сжирают дофига ресурсов и ценят удобство/привычки разработчика больше чем скорость и эффективность работы приложения. Во многих случаях этот подход имеет смысл.

Класс или функциональный компонент - дело вкуса, эффективность разработки одинаковая, разница в работе минимальная.

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