Apakah pelbagai jenis komponen React (berfungsi, kelas)?

Apakah pelbagai jenis komponen React (berfungsi, kelas)?

Komponen React adalah blok bangunan aplikasi React, dan mereka boleh dikategorikan kepada dua jenis utama: komponen fungsional dan komponen kelas.

1. Komponen Fungsian:

   • Pada mulanya diperkenalkan sebagai cara yang lebih mudah untuk menulis komponen, komponen berfungsi pada dasarnya adalah fungsi JavaScript.
   • Mereka menerima prop sebagai hujah dan mengembalikan elemen reaksi untuk menggambarkan UI.
   • Dengan pengenalan cangkuk (bermula dari React 16.8), komponen berfungsi mendapat keupayaan untuk mengendalikan kesan keadaan dan sampingan, menjadikannya lebih kuat sebagai komponen kelas.

   • Berikut adalah contoh asas komponen berfungsi:

      <code class="javascript">function Welcome(props) { return <h1>Hello, {props.name}</h1>; }</code>

     Salin selepas log masuk

2. Komponen Kelas:

   • Komponen kelas adalah kelas ES6 yang melanjutkan React.Component .
   • Mereka mempunyai sintaks yang lebih kompleks dan memerlukan penggunaan this untuk mengakses kaedah prop, keadaan, dan kitaran hayat.
   • Komponen kelas mempunyai kaedah kitaran hayat seperti componentDidMount , componentDidUpdate , dan componentWillUnmount , yang digunakan untuk menguruskan kitaran hayat komponen.

   • Berikut adalah contoh asas komponen kelas:

      <code class="javascript">class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }</code>

     Salin selepas log masuk

Bilakah saya harus menggunakan komponen berfungsi berbanding komponen kelas dalam React?

Pilihan antara komponen fungsional dan kelas sebahagian besarnya bergantung pada versi React yang anda gunakan dan keperluan khusus komponen anda.

1. Gunakan komponen fungsional apabila:

   • Anda mahukan sintaks yang lebih mudah dan ringkas. Komponen fungsional lebih mudah dibaca dan ditulis.
   • Anda menggunakan React 16.8 atau lebih baru dan boleh memanfaatkan cangkuk untuk pengurusan negeri dan kesan sampingan. Cangkuk seperti useState , useEffect , useContext , dan lain -lain, membuat komponen berfungsi lebih berkuasa dan serba boleh.
   • Anda ingin mengelakkan berurusan dengan kaedah this dan kitaran hayat, yang boleh menjadi rawan ralat dalam komponen kelas.
   • Anda ingin membuat komponen yang lebih mudah diuji dan lebih mudah untuk refactor.

2. Gunakan komponen kelas apabila:

   • Anda bekerja dengan versi React yang lebih lama yang tidak menyokong cangkuk (sebelum React 16.8).
   • Anda perlu menggunakan kaedah kitaran hayat tertentu yang tidak mudah ditiru dengan cangkuk, seperti getDerivedStateFromProps atau getSnapshotBeforeUpdate .
   • Anda mengekalkan codebase sedia ada yang ditulis menggunakan komponen kelas, dan refactoring mereka ke komponen berfungsi bukanlah keutamaan atau praktikal pada masa ini.

Dalam perkembangan reaksi moden, komponen fungsional dengan cangkuk biasanya disukai kerana kesederhanaan mereka dan keupayaan untuk mengendalikan semua fungsi yang sebelum ini eksklusif untuk komponen kelas.

Apakah perbezaan utama dalam pengurusan negeri antara komponen fungsional dan kelas?

Pengurusan negeri dalam React telah berkembang dengan ketara dengan pengenalan cangkuk, yang mempengaruhi bagaimana keadaan ditangani dalam komponen fungsional dan kelas.

1. Negeri dalam Komponen Kelas:

   • Komponen kelas menguruskan keadaan melalui objek state , yang dimulakan dalam pembina.
   • Negeri diakses dan dikemas kini menggunakan this.state dan this.setState() .
   • this.setState() tidak segerak dan boleh menerima fungsi panggil balik untuk dijalankan selepas negeri telah dikemas kini.

   • Contoh:

      <code class="javascript">class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } increment = () => { this.setState({ count: this.state.count 1 }); } render() { return ( <div> <p>Count: {this.state.count}</p> <button onclick="{this.increment}">Increment</button> </div> ); } }</code>

     Salin selepas log masuk

2. Nyatakan dalam komponen berfungsi:

   • Komponen fungsional menggunakan cangkuk useState untuk menguruskan keadaan.
   • useState Mengembalikan pemboleh ubah keadaan dan fungsi untuk mengemas kini.
   • Kemas kini ke Negeri adalah segerak, dan anda boleh menggunakan keadaan terkini dengan segera.

   • Contoh:

      <code class="javascript">function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count 1); } return ( <div> <p>Count: {count}</p> <button onclick="{increment}">Increment</button> </div> ); }</code>

     Salin selepas log masuk

Perbezaan utama termasuk:

• Sintaks: Komponen Kelas useState this.state this.setState()
• Kemas kini Asynchronous: this.setState() dalam komponen kelas tidak segerak, sedangkan kemas kini dengan useState adalah segerak.
• Pengurusan kitaran hayat: Komponen kelas menggunakan kaedah kitaran hayat untuk mengendalikan kesan sampingan, manakala komponen berfungsi menggunakan useEffect untuk tujuan yang sama.

Bagaimanakah saya dapat mengoptimumkan prestasi komponen berfungsi menggunakan cangkuk berbanding dengan komponen kelas?

Mengoptimumkan prestasi komponen React adalah penting untuk membina aplikasi yang cekap. Komponen fungsional dengan cangkuk menawarkan beberapa kelebihan berbanding komponen kelas dalam hal ini.

1. Memoisasi dengan useMemo dan useCallback :

   • Dalam komponen berfungsi, anda boleh menggunakan useMemo untuk memoize pengiraan mahal dan useCallback untuk memoize fungsi. Ini menghalang pelaku semula yang tidak perlu dengan menghalang pengiraan semula nilai atau rekreasi fungsi.

   • Contoh dengan useMemo :

      <code class="javascript">function MyComponent({ prop }) { const expensiveResult = useMemo(() => computeExpensiveValue(prop), [prop]); return <div>{expensiveResult}</div>; }</code>

     Salin selepas log masuk
   • Dalam komponen kelas, mencapai tahap pengoptimuman yang sama memerlukan secara manual melaksanakan shouldComponentUpdate atau menggunakan React.memo .

2. Mengelakkan pelaku semula yang tidak perlu dengan React.memo :

   • React.memo boleh digunakan untuk memoize komponen berfungsi, menghalang pengendali semula yang tidak perlu jika alat peraga tidak berubah.

   • Contoh:

      <code class="javascript">const MyComponent = React.memo(function MyComponent(props) { // Component implementation });</code>

     Salin selepas log masuk
   • Komponen kelas boleh menggunakan PureComponent atau melaksanakan shouldComponentUpdate untuk mencapai hasil yang sama, tetapi kaedah ini kurang fleksibel daripada React.memo .

3. Mengoptimumkan kemas kini negeri dengan useState dan useReducer :

   • Dalam komponen fungsional, useState dan useReducer boleh digunakan bersempena dengan useCallback untuk memastikan bahawa panggilan balik tidak menyebabkan render yang tidak perlu.

   • Contoh dengan useReducer :

      <code class="javascript">const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count 1 }; default: throw new Error(); } } function Counter() { const [state, dispatch] = useReducer(reducer, initialState); return (  Count: {state.count} <button onclick="{()"> dispatch({ type: 'increment' })}> </button> > ); }</code>

     Salin selepas log masuk
   • Dalam komponen kelas, kemas kini negeri biasanya diuruskan dengan this.setState() , yang boleh kurang efisien dari segi penalaan prestasi.

4. Pengoptimuman kitaran hayat dengan useEffect :

   • useEffect dalam komponen berfungsi membolehkan kawalan halus ke atas kesan sampingan, termasuk kemas kini berasaskan pembersihan dan ketergantungan.
   • Ini boleh menjadi lebih cekap daripada kaedah kitaran hayat dalam komponen kelas, di mana menguruskan pelbagai kaedah kitaran hayat boleh menjadi kompleks dan membawa kepada isu -isu prestasi yang berpotensi.

   • Contoh:

      <code class="javascript">function MyComponent() { useEffect(() => { // Side effect code here return () => { // Cleanup code here }; }, [/* dependencies */]); // Component implementation }</code>

     Salin selepas log masuk

Ringkasnya, komponen berfungsi dengan cangkuk menawarkan cara yang lebih fleksibel dan cekap untuk mengoptimumkan prestasi berbanding dengan komponen kelas. Dengan memanfaatkan cangkuk seperti useMemo , useCallback , dan useEffect , pemaju dapat mencapai prestasi yang lebih baik dengan kod boilerplate yang kurang.

Atas ialah kandungan terperinci Apakah pelbagai jenis komponen React (berfungsi, kelas)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!