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
function
kulcsszó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
Component
osztá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