Функционални компоненти срещу Класови компоненти в React

В 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