Kapan menggunakan komponen Bereaksi berbasis kelas ES6 vs komponen Bereaksi ES6 fungsional?

Setelah menghabiskan waktu belajar Bereaksi, saya memahami perbedaan antara dua paradigma utama pembuatan komponen.

Pertanyaan saya adalah kapan saya harus menggunakan yang mana dan mengapa? Apa manfaat / pengorbanan dari satu di atas yang lain?

Kelas ES6:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

Fungsional:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

Saya berpikir fungsional setiap kali tidak ada keadaan yang dimanipulasi oleh komponen itu, tetapi apakah begitu?

Saya menduga jika saya menggunakan metode siklus hidup, mungkin lebih baik menggunakan komponen berbasis kelas.

Anda punya ide yang tepat. Pergi dengan fungsional jika komponen Anda tidak melakukan lebih dari menerima beberapa alat peraga dan render. Anda dapat menganggap ini sebagai fungsi murni karena mereka akan selalu membuat dan berperilaku sama, mengingat alat peraga yang sama. Juga, mereka tidak peduli dengan metode siklus hidup atau memiliki kondisi internal mereka sendiri.

Karena ringan, penulisan komponen sederhana ini sebagai komponen fungsional cukup standar.

Jika komponen Anda membutuhkan lebih banyak fungsi, seperti menjaga status, gunakan kelas sebagai gantinya.

Info lebih lanjut: https://facebook.github.io/react/docs/reusable-components.html#es6-classes

EDIT : Banyak hal di atas benar, sampai diperkenalkannya React Hooks.

• componentDidUpdatedapat direplikasi dengan useEffect(fn), di mana fnfungsi untuk dijalankan saat rerendering.

• componentDidMountmetode dapat direplikasi dengan useEffect(fn, []), di mana fnfungsi untuk dijalankan pada rerendering, dan []merupakan array objek yang komponen akan rerender, jika dan hanya jika setidaknya satu telah mengubah nilai sejak render sebelumnya. Karena tidak ada, useEffect()berjalan sekali, pada mount pertama.

• statedapat direplikasi dengan useState(), yang nilai kembaliannya dapat dihancurkan ke referensi negara dan fungsi yang dapat mengatur negara (yaitu, const [state, setState] = useState(initState)). Contoh mungkin menjelaskan ini dengan lebih jelas:

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

Mengenai rekomendasi kapan menggunakan kelas atas komponen fungsional, Facebook secara resmi merekomendasikan penggunaan komponen fungsional sedapat mungkin . Di samping yang kecil, saya telah mendengar sejumlah orang berdiskusi tidak menggunakan komponen fungsional untuk alasan kinerja, khususnya itu

"Fungsi penanganan acara didefinisikan ulang per render dalam komponen fungsional"

Meskipun benar, harap pertimbangkan apakah komponen Anda benar-benar merender dengan kecepatan atau volume sedemikian rupa sehingga ini patut diperhatikan.

Jika ya, Anda dapat mencegah mendefinisikan ulang fungsi menggunakan useCallbackdan useMemokait. Namun, ingatlah bahwa ini dapat membuat kode Anda (secara mikroskopis) lebih buruk dalam kinerjanya .

Tapi jujur, saya belum pernah mendengar mendefinisikan ulang fungsi menjadi hambatan dalam aplikasi Bereaksi. Optimalisasi prematur adalah akar dari semua kejahatan - khawatir tentang ini ketika itu menjadi masalah

Selalu berusaha menggunakan fungsi stateless (komponen fungsional) bila memungkinkan. Ada beberapa skenario di mana Anda harus menggunakan kelas Bereaksi reguler:

• Komponen perlu mempertahankan status
• Komponen rendering ulang terlalu banyak dan Anda harus mengontrolnya via shouldComponentUpdate
• Anda memerlukan komponen kontainer

MEMPERBARUI

Sekarang ada kelas Bereaksi yang disebut PureComponentbahwa Anda dapat memperluas (bukannya Component) yang mengimplementasikan sendiri shouldComponentUpdateyang menangani perbandingan alat peraga dangkal untuk Anda. Baca lebih lajut

PEMBARUAN Maret 2019

https://overreacted.io/how-are-function-components-different-from-classes/

UPDATE Feb 2019:

Dengan diperkenalkannya kait Bereaksi , tampaknya seolah-olah tim Bereaksi menginginkan kita untuk menggunakan komponen fungsional bila memungkinkan (yang lebih baik mengikuti sifat fungsional JavaScript).

Motivasi mereka:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

Komponen fungsional dengan pengait dapat melakukan hampir semua hal yang dapat dilakukan komponen kelas, tanpa ada penarikan mundur yang disebutkan di atas.

Saya sarankan menggunakannya sesegera mungkin.

Jawaban Asli

Komponen fungsional tidak lebih ringan daripada komponen berbasis kelas, "mereka berfungsi persis seperti kelas." - https://github.com/facebook/react/issues/5677#issuecomment-241190513

Tautan di atas sedikit tanggal, tetapi React 16.7.0's dokumentasi mengatakan bahwa komponen fungsional dan kelas:

"Setara dengan sudut pandang React." - https://reactjs.org/docs/components-and-props.html#stateless-functions

Pada dasarnya tidak ada perbedaan antara komponen fungsional dan komponen kelas yang hanya mengimplementasikan metode render, selain sintaksis.

Di masa mendatang (mengutip tautan di atas) "kami [Bereaksi] mungkin menambahkan optimasi seperti itu."

Jika Anda mencoba untuk meningkatkan kinerja dengan menghilangkan render yang tidak perlu, kedua pendekatan menyediakan dukungan. memountuk komponen fungsional dan PureComponentuntuk kelas.

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

Itu benar-benar terserah Anda. Jika Anda ingin pelat ketel kurang, gunakan fungsional. Jika Anda menyukai pemrograman fungsional dan tidak suka kelas, aktifkan. Jika Anda ingin konsistensi antara semua komponen dalam basis kode Anda, ikuti kelas. Jika Anda bosan melakukan refactoring dari komponen berbasis fungsional ke kelas saat Anda membutuhkan sesuatu state, lanjutkan dengan kelas.

Pada Bereaksi 16.8 istilah komponen Fungsional Stateless menyesatkan dan harus dihindari karena mereka tidak lagi tanpa kewarganegaraan ( React.SFC usang , Dan Abramov pada React.SFC ), mereka dapat memiliki keadaan, mereka dapat memiliki kait (yang bertindak sebagai metode siklus hidup) juga, mereka lebih atau kurang tumpang tindih dengan komponen kelas

Komponen berbasis kelas

• negara
• metode siklus hidup
• memoisasi dengan React.PureComponent

Komponen fungsional:

• negara ( useState , useReducer hooks)
• metode siklus hidup (melalui useEffect , useLayoutEffect hooks)
• memoisasi melalui memo HOC

Mengapa saya lebih suka komponen Funtional

• Bereaksi menyediakan hook useEffect yang merupakan cara yang sangat jelas dan ringkas untuk menggabungkan componentDidMount, componentDidUpdatedan componentWillUnmountmetode siklus hidup
• Dengan kait, Anda dapat mengekstrak logika yang dapat dengan mudah dibagikan di seluruh komponen dan dapat diuji
• kurang kebingungan tentang pelingkupan

Bereaksi motivasi mengapa menggunakan kait (yaitu komponen fungsional).