Різниця між функціональними та класовими компонентми в React
Що таке компоненти в React?
Компоненти — це будівельні блоки React-додатків. Вони можуть бути:
- Функціональні — звичайні JavaScript-функції
- На основі класів — класи, що наслідують
React.Component
Основні відмінності
| **** | Функціональні компоненти | Класи компоненти |
|---|---|---|
| Синтаксис | function MyComponent() | class MyComponent extends React.Component |
| Підтримка стану | Так (через useState, useReducer) | Так (через this.state) |
| Життєвий цикл | Через хуки (useEffect) | Методи (componentDidMount тощо) |
| Контекст | useContext() | this.context |
| this | Немає this | Використовує this |
| Стислість коду | коротший і простіший | більш детальний |
| Підтримка хуків | Так | Ні |
| Продуктивність (теоретично) | Трохи вища | Трохи нижча |
Приклад функціонального компонент
jsx
import { useState, useEffect } from "react";
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("Компонент рендериться");
return () => {
console.log("Компонент демонтується");
};
}, []);
return (
<div>
<p>Лічильник: {count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}Приклад класового компонент
jsx
import React from "react";
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
console.log("Компонент рендериться");
}
componentWillUnmount() {
console.log("Компонент демонтується");
}
render() {
return (
<div>
<p>Лічильник: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
+
</button>
</div>
);
}
}Коли використовувати
- Функціональні компоненти — сучасний стандарт. Використовуються в 99% випадків, особливо з хуками.
- Класові компоненти — в наслiдних проектах або при роботі з застарілим кодом.
Висновок
- Функціональні компоненти є простішими та зручнішими, особливо з появою хуків.
- Класові компоненти вважаються застарілими і використовуються лише для зворотної сумісності.
- Всім новим проектам рекомендується писати тільки за допомогою функціональних компонентів.
Коротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.