Ответ
В React классовые компоненты имеют методы жизненного цикла, а функциональные используют хуки. Пример с классом:
class Example extends React.Component {
componentDidMount() {
console.log('Компонент монтирован');
// Загрузка данных, подписки
}
componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
console.log('Значение пропса изменилось');
}
}
componentWillUnmount() {
console.log('Компонент будет размонтирован');
// Отписки, очистка таймеров
}
render() {
return <div>{this.props.value}</div>;
}
}Для функциональных компонентов:
function Example({ value }) {
useEffect(() => {
console.log('Монтирование/обновление');
return () => console.log('Размонтирование');
}, [value]); // Зависимости
return <div>{value}</div>;
}Ответ 18+ 🔞
А, ну вот, смотри, классика жанра, блядь! Эти ваши классовые компоненты — как старый дед с костылями, который всё помнит, где у него что болит. Ты ему кричишь: «Деда, монтируйся!», а он тебе в ответ: «Щас, внучек, componentDidMount вызову, консольку потревожу, данные подтяну, подписки развешу, ёпта!».
Вот смотри, как это выглядит, этот старый пердун:
class Example extends React.Component {
componentDidMount() {
console.log('Компонент монтирован');
// Загрузка данных, подписки
}
componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
console.log('Значение пропса изменилось');
}
}
componentWillUnmount() {
console.log('Компонент будет размонтирован');
// Отписки, очистка таймеров
}
render() {
return <div>{this.props.value}</div>;
}
}Видишь эту простыню? Это ж надо было всё это запоминать, блядь! Где что вызывается, куда что пихать. componentDidUpdate — это вообще отдельная песня, там надо было сравнивать пропсы вручную, как будто мы в каменном веке, сука! А если забыть отписаться в componentWillUnmount — пиши пропало, утечка памяти обеспечена, привет, ебаный колхоз!
А теперь, внимание на хуй, смотри, как это делают современные пацаны на функциональных компонентах с хуками. Один useEffect заменяет всю эту трёхэтажную хуйню! Красота, ядрёна вошь!
function Example({ value }) {
useEffect(() => {
console.log('Монтирование/обновление');
return () => console.log('Размонтирование');
}, [value]); // Зависимости
return <div>{value}</div>;
}Всё, пиздец! Всё в одной функции! Захотел что-то сделать при монтировании и обновлении — написал в useEffect. Надо почистить за собой — вернул функцию. Надо следить только за value — кинул его в массив зависимостей. Нет зависимостей — эффект запустится один раз, как componentDidMount. Пустой массив возврата — будет как componentWillUnmount. Удобно, ёпта, до охуения!
Раньше-то, блядь, мозги выносило на разбор этих жизненных циклов. А теперь — чих-пых, и готово. Прогресс, сука, не остановить! Хотя, конечно, старикам-классам иногда ещё приходится в легаси-коде поковыриваться, так что помнить про них всё равно надо, как ни крути. Но факт остаётся фактом — функциональные компоненты с хуками это просто пизда, вот и всё.