В чем разница между функциональным компонентом и классов в React
Python
Senior
Без компании
В чем разница между функциональным компонентом и классов в React
Ответы
Функциональные компоненты и классовые компоненты в React имеют несколько ключевых отличий:
- **Синтаксис**:
- Функциональные компоненты — это обычные функции JavaScript.
- Классовые компоненты — это классы ES6, наследующие `React.Component`.
- **Состояние (state)**:
- В функциональных компонентах состояние управляется через `useState`.
- В классовых — через `this.state` и `this.setState()`.
- **Жизненный цикл**:
- Функциональные используют хуки (`useEffect`).
- Классовые — методы (`componentDidMount`, `componentDidUpdate` и т.д.).
- **Производительность**:
- Функциональные легче и быстрее, так как не создают экземпляров класса.
**Пример функционального компонента:**
```
function Greeting() {
const [name, setName] = useState("World");
return <h1>Hello, {name}!</h1>;
}
```
**Пример классового компонента:**
```
class Greeting extends React.Component {
state = { name: "World" };
render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}
```
Сейчас React рекомендует использовать функциональные компоненты с хуками, так как они проще и покрывают все возможности классовых.