Вопрос проверяет понимание двух основных подходов к созданию компонентов в React: классового и функционального. Он помогает оценить знания о различных способах работы с состоянием и жизненными циклами компонентов.
Классовые компоненты используют синтаксис классов и имеют методы для работы с состоянием и жизненными циклами. Функциональные компоненты — это простые функции, которые возвращают JSX. Раньше функциональные компоненты не могли иметь состояния, но с появлением хуков в React они получили эту возможность. Теперь функциональные компоненты чаще используются благодаря более простому синтаксису и гибкости.
Классовые компоненты были основным способом создания компонентов с состоянием и методами жизненного цикла до введения хуков. Они используют классы и методы, такие как render(), componentDidMount(), componentDidUpdate(), для управления состоянием и побочными эффектами. Например:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
} render() {
return <div>{this.state.count}</div>;
}
}С появлением хуков функциональные компоненты стали предпочтительнее, так как они проще по структуре. Хуки, такие как useState и useEffect, позволяют функциональным компонентам управлять состоянием и жизненными циклами. Например:
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]);
return <div>{count}</div>;
}Функциональные компоненты более читаемы, легче тестируются и обеспечивают лучшую производительность за счет оптимизаций, таких как useMemo и useCallback.