Здравствуйте.
Хочу разобраться в нескольких вопросах.
Есть компонент, который представлен классом.
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, в каких случаях его использовать и где это будет лишним?
Спасибо.
Простой