Funkcionális alkatrészek vs osztályú alkatrészek a React

A React főleg két komponenst tartalmaz:

  • Funkcionális alkatrészek
  • Osztály-alkatrészek

Funkcionális alkatrészek

  • A funkcionális komponensek a JavaScript alapvető funkciói. Ezek általában nyílfüggvények, de létrehozhatók a szokásos functionkulcsszóval is.
  • Néha „buta” vagy „hontalan” komponenseknek nevezik őket, mivel egyszerűen elfogadják az adatokat és valamilyen formában megjelenítik azokat; vagyis elsősorban ők felelősek a felhasználói felület megjelenítéséért.
  • A reakció életciklus-módszerek (például componentDidMount) nem használhatók funkcionális komponensekben.
  • A funkcionális komponensekben nincs renderelési módszer.
  • Ezek elsősorban a felhasználói felületért felelősek, és általában csak prezentációs jellegűek (például egy gomb komponens).
  • A funkcionális alkatrészek elfogadják és felhasználhatják a kellékeket.
  • A funkcionális komponenseket előnyben kell részesíteni, ha nem kell használni a React állapotot.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Osztály-alkatrészek

  • Az osztálykomponensek az ES6 osztályt használják, és a Reactben kibővítik az Componentosztályt.
  • Néha „intelligens” vagy „állapotos” komponenseknek hívják őket, mivel hajlamosak megvalósítani a logikát és az állapotot.
  • A reagálási életciklus-módszerek alkalmazhatók osztálykomponenseken belül (például componentDidMount).
  • Átadja a kellékeket az osztály összetevőinek, és hozzájuk fér 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;

Több információ

  • React Components
  • Funkcionális vs osztályösszetevők
  • Állapotú és hontalan funkcionális alkatrészek a React
  • Állapot és életciklus