Komponen Fungsi vs Komponen Kelas dalam React

Terdapat terutamanya dua komponen dalam React:

  • Komponen Berfungsi
  • Komponen Kelas

Komponen Berfungsi

  • Komponen fungsional adalah fungsi asas JavaScript. Ini biasanya fungsi anak panah tetapi juga dapat dibuat dengan functionkata kunci biasa .
  • Kadang-kadang disebut sebagai komponen "bodoh" atau "tanpa status" kerana mereka hanya menerima data dan memaparkannya dalam bentuk tertentu; mereka bertanggungjawab terutamanya untuk membuat UI.
  • Kaedah kitaran hidup reaktif (misalnya, componentDidMount) tidak boleh digunakan dalam komponen berfungsi.
  • Tidak ada kaedah render yang digunakan dalam komponen berfungsi.
  • Ini bertanggungjawab terutamanya untuk UI dan biasanya hanya persembahan (Contohnya, komponen Butang).
  • Komponen berfungsi boleh menerima dan menggunakan alat peraga.
  • Komponen fungsional harus digemari jika anda tidak perlu menggunakan keadaan React.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Komponen Kelas

  • Komponen kelas menggunakan kelas ES6 dan memperluas Componentkelas di React.
  • Kadang-kadang disebut komponen "pintar" atau "bernegara" kerana cenderung menerapkan logik dan keadaan.
  • Kaedah kitaran hidup reaktif boleh digunakan di dalam komponen kelas (contohnya componentDidMount).
  • Anda meneruskan komponen ke komponen kelas dan mengaksesnya 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;

Maklumat lanjut

  • Reaksi Komponen
  • Komponen fungsional vs kelas
  • Komponen Fungsional Stateful vs Stateless dalam React
  • Negeri dan Kitaran Hidup