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