3.7 KiB
3.7 KiB
| title | localeTitle |
|---|---|
| Functional Components vs Class Components | Функциональные компоненты и компоненты класса |
Функциональные компоненты и компоненты класса
В React есть в основном два компонента:
- Функциональные компоненты
- Компоненты класса
Функциональные компоненты
- Функциональные компоненты - это основные функции JavaScript. Они обычно являются функциями стрелок, но также могут быть созданы с помощью ключевого слова регулярной
function. - Иногда они называются «немыми» или «без гражданства», поскольку они просто принимают данные и отображают их в той или иной форме; то есть они в основном отвечают за предоставление пользовательского интерфейса.
- Реагирующие методы жизненного цикла (например,
componentDidMount) не могут использоваться в функциональных компонентах. - В функциональных компонентах не используется метод рендеринга.
- Они в основном отвечают за пользовательский интерфейс и обычно являются только презентационными (например, компонент Button).
- Функциональные компоненты могут принимать и использовать реквизиты.
- Функциональные компоненты должны быть предпочтительными, если вам не нужно использовать состояние React.
import React from "react";
const Person = props => (
<div>
<h1>Hello, {props.name}</h1>
</div>
);
export default Person;
Компоненты класса
- Компоненты класса используют класс ES6 и расширяют класс
Componentв React. - Иногда они называются «умными» или «состояниями», поскольку они склонны реализовывать логику и состояние.
- Методы жизненного цикла React могут использоваться внутри компонентов класса (например,
componentDidMount). - Вы передаете реквизиты до компонентов класса и
this.propsдоступ к ним с помощьюthis.props
import React, { Component } from "react";
class Person extends Component {
constructor(props){
super(props);
this.state = {
myState: true;
}
}
render() {
return (
<div>
<h1>Hello Person</h1>
</div>
);
}
}
export default Person;