Funktsionaalsed komponendid vs klassi komponendid reaktsioonis

Reactis on peamiselt kaks komponenti:

  • Funktsionaalsed komponendid
  • Klassi komponendid

Funktsionaalsed komponendid

  • Funktsionaalsed komponendid on JavaScripti põhifunktsioonid. Need on tavaliselt noolefunktsioonid, kuid neid saab luua ka tavalise functionmärksõnaga.
  • Mõnikord nimetatakse neid "tummaks" või "kodakondsuseta" komponendiks, kuna nad lihtsalt aktsepteerivad andmeid ja kuvavad neid mingil kujul; see tähendab, et nad vastutavad peamiselt kasutajaliidese renderdamise eest.
  • Reageeriva elutsükli meetodeid (näiteks componentDidMount) ei saa funktsionaalsetes komponentides kasutada.
  • Funktsionaalsetes komponentides pole kasutatud renderdamismeetodit.
  • Need vastutavad peamiselt kasutajaliidese eest ja on tavaliselt ainult esitluslikud (näiteks nupu komponent).
  • Funktsionaalsed komponendid saavad rekvisiite vastu võtta ja kasutada.
  • Funktsionaalseid komponente tuleks eelistada, kui te ei pea kasutama React olekut.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Klassi komponendid

  • Klassi komponendid kasutavad ES6 klassi ja laiendavad Componentklassi React.
  • Mõnikord nimetatakse neid "nutikateks" või "olekulisteks" komponentideks, kuna nad kipuvad loogikat ja olekut rakendama.
  • Reaktiivsete elutsüklimeetodeid saab kasutada klassi komponentides (näiteks componentDidMount).
  • Annate rekvisiidid alla klassi komponentidele ja pääsete neile juurde 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;

Rohkem informatsiooni

  • Reageerige komponendid
  • Funktsionaalsed vs klassi komponendid
  • Olekulised vs kodakondsuseta funktsionaalsed komponendid reaktsioonis
  • Olek ja elutsükkel