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

В React в основному є два компоненти:

  • Функціональні компоненти
  • Компоненти класу

Функціональні компоненти

  • Функціональні компоненти - це основні функції JavaScript. Це, як правило, функції зі стрілками, але їх також можна створити за допомогою functionключового слова regular .
  • Іноді їх називають "німими" або "без громадянства" компонентами, оскільки вони просто приймають дані та відображають їх у певній формі; тобто вони в основному відповідають за надання UI.
  • Методи життєвого циклу реагувати (наприклад, 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
  • Функціональні компоненти проти класу
  • Функціональні компоненти та бездержавні функціональні компоненти в React
  • Держава та життєвий цикл