В React има основно два компонента:
- Функционални компоненти
- Компоненти на класа
Функционални компоненти
- Функционалните компоненти са основни JavaScript функции. Това обикновено са функции със стрелки, но могат да бъдат създадени и с обикновената
function
ключова дума. - Понякога наричани „тъпи“ или „несъстоятелни“ компоненти, тъй като те просто приемат данни и ги показват в някаква форма; тоест те са отговорни главно за изобразяване на потребителския интерфейс.
- Методите на жизнения цикъл на React (например
componentDidMount
) не могат да се използват във функционални компоненти. - Във функционални компоненти не се използва метод за рендиране.
- Те са отговорни главно за потребителския интерфейс и обикновено са само презентационни (например компонент Бутон).
- Функционалните компоненти могат да приемат и използват реквизит.
- Функционалните компоненти трябва да бъдат предпочитани, ако не е необходимо да използвате състоянието на React.
import React from "react"; const Person = props => ( Hello, {props.name}
); export default Person;
Компоненти на класа
- Компонентите на класа използват клас ES6 и разширяват
Component
класа в React. - Понякога наричани „интелигентни“ или „държавни“ компоненти, тъй като те са склонни да прилагат логика и състояние.
- Методите на жизнения цикъл на React могат да се използват в компонентите на класа (например
componentDidMount
). - Предавате реквизити надолу към компонентите на класа и получавате достъп до тях с
this.props
import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( Hello Person
); } } export default Person;
Повече информация
- React Components
- Функционални срещу клас компоненти
- Функционални компоненти срещу състояние без гражданство в React
- Състояние и LifeCycle