Есть два основных подхода к созданию компонентов в React, каждый со своими особенностями и применением.
Функциональные компоненты — это современный и рекомендуемый подход. Это простые JavaScript-функции, которые принимают props как параметр и возвращают React-элементы.
function Greeting({ message }) {
return <h1>{`Hello, ${message}`}</h1>
}
Основные преимущества включают простоту, удобство тестирования и нативную поддержку React Hooks (вроде useState и useEffect).
Классовые компоненты используют синтаксис ES6-классов и наследуют React.Component. Они требуют метода render() для возврата React-элементов.
class Greeting extends React.Component {
render() {
return <h1>{`Hello, ${this.props.message}`}</h1>
}
}
Классовые компоненты дают доступ к методам жизненного цикла и хранят локальное состояние через this.state.
Функциональные компоненты могут напрямую использовать React Hooks вроде useState и useEffect, в то время как компоненты классов требуют методов жизненного цикла для управления состоянием и побочными эффектами.
Новый — ещё не проверен сообществом
Вы