Загрузка...
Загрузка...
Продолжая работу с платформой, вы принимаете условия Политики конфиденциальности и использование файлов cookie.
Компоненты — это строительные блоки React-приложения. Они могут быть:
React.Component| Функциональные компоненты | Классовые компоненты | |
|---|---|---|
| Синтаксис | function MyComponent() | class MyComponent extends React.Component |
| Поддержка состояния | Да (через useState, useReducer) | Да (через this.state) |
| Жизненный цикл | Через хуки (useEffect) | Методы (componentDidMount, и т.п.) |
Контекст (Context) | useContext() | this.context |
| this | Нет this | Используется this |
| Краткость кода | короче и проще | более многословные |
| Поддержка хуков (hooks) | Да | Нет |
| Performance (теоретически) | Чуть выше | Чуть ниже |
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>
);
}
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>
);
}
}