Apakah keadaan dalam React? Bagaimana anda menguruskan negeri dalam kelas dan komponen berfungsi?

Apakah keadaan dalam React? Bagaimana anda menguruskan negeri dalam kelas dan komponen berfungsi?

Nyatakan dalam React merujuk kepada data atau sifat yang mengawal tingkah laku dan rendering komponen. Ini boleh berubah dan boleh berubah dari masa ke masa, mencetuskan semula untuk mengemas kini antara muka pengguna. Negeri adalah penting untuk mewujudkan aplikasi web interaktif dan dinamik.

Menguruskan Negeri dalam Komponen Kelas:

Dalam komponen kelas, keadaan diuruskan menggunakan objek this.state . Anda memulakan keadaan dalam pembina dan boleh mengemas kini menggunakan this.setState() . Inilah contoh:

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

Menguruskan Negeri dalam Komponen Fungsi:

Dalam komponen fungsional, keadaan diuruskan menggunakan cangkuk useState yang diperkenalkan dalam React 16.8. Cangkuk useState membolehkan anda menambah keadaan kepada komponen berfungsi. Inilah caranya:

 <code class="javascript">import React, { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); const incrementCount = () => { setCount(count 1); }; return ( <div> <p>Count: {count}</p> <button onclick="{incrementCount}">Increment</button> </div> ); }</code>

Dalam contoh ini, useState mengembalikan array di mana elemen pertama adalah nilai keadaan semasa, dan yang kedua adalah fungsi untuk mengemas kini.

Bagaimanakah anda boleh mengemas kini keadaan dalam React, dan apakah perbezaan antara setstate dalam komponen kelas dan cangkuk useState dalam komponen berfungsi?

Kemas kini keadaan:

• Komponen Kelas: Anda mengemas kini keadaan menggunakan this.setState() . Ia boleh mengambil objek atau fungsi sebagai hujah. Apabila menggunakan objek, React menggabungkan objek dengan keadaan semasa. Menggunakan fungsi memastikan anda bekerja dengan keadaan yang paling terkini, yang penting untuk kemas kini negara tak segerak.
• Komponen Fungsian: Anda mengemas kini keadaan menggunakan fungsi yang dikembalikan oleh useState . Fungsi ini mengambil nilai keadaan baru sebagai hujah dan mengemas kini keadaan.

Perbezaan antara setstate dan useState:

1. Sintaks dan Penggunaan:

   • setState adalah kaedah pada contoh kelas dan perlu terikat jika digunakan dalam pengendali acara.
   • useState mengembalikan array yang boleh anda gunakan dengan pemusnahan array, menjadikannya lebih ringkas dan mudah.

2. Sifat Asynchronous:

   • Kedua -dua setState dan fungsi yang dikembalikan oleh useState tidak segerak. Walau bagaimanapun, setState boleh menerima fungsi panggil balik untuk dilaksanakan selepas keadaan telah dikemas kini, sementara useState tidak menyediakan mekanisme terbina dalam ini. Anda biasanya akan menggunakan useEffect untuk mengendalikan kesan sampingan selepas perubahan keadaan dalam komponen berfungsi.

3. Menggabungkan Negeri:

   • setState menggabungkan keadaan baru dengan keadaan yang sedia ada, yang berguna untuk mengemas kini objek atau tatasusunan bersarang.
   • Fungsi setter useState menggantikan keseluruhan nilai negeri. Anda perlu menggabungkan keadaan secara manual dalam komponen berfungsi, sering menggunakan borang kemas kini fungsi seperti setCount(prevCount => prevCount 1) .

Apakah amalan terbaik untuk menguruskan keadaan kompleks dalam aplikasi React, dan bagaimana kaedah kitaran hayat dalam komponen kelas berbanding dengan useeffect dalam komponen berfungsi?

Amalan terbaik untuk menguruskan keadaan kompleks:

1. Angkat Negeri: Gerakkan Negeri ke nenek moyang yang paling dekat dengan komponen yang perlu menggunakannya. Ini membantu dalam menguruskan negara di pusat dan melepaskannya melalui alat peraga.
2. Gunakan API Konteks: Untuk komponen yang sangat bersarang, gunakan API konteks untuk mengelakkan penggerudian prop dan menjadikan keadaan lebih mudah diakses di seluruh pokok komponen.
3. Perpustakaan Pengurusan Negeri: Untuk aplikasi yang sangat kompleks, pertimbangkan untuk menggunakan perpustakaan pengurusan negeri seperti Redux atau Mobx untuk mengendalikan keadaan global.
4. Kemas kini yang tidak berubah: Sentiasa merawat keadaan sebagai kaedah yang tidak berubah dan menggunakan seperti .map() , .filter() , dan pengendali penyebaran untuk membuat objek negara baru.
5. Kebimbangan berasingan: Memecahkan komponen besar ke dalam yang lebih kecil, lebih mudah diurus untuk memastikan logik negara jelas dan boleh diguna semula.

Kaedah kitaran hayat vs useeffect:

• Kaedah kitaran hayat dalam komponen kelas: Ini termasuk componentDidMount , componentDidUpdate , dan componentWillUnmount . Mereka digunakan untuk menguruskan kesan sampingan seperti mengambil data, menyediakan langganan, dan membersihkannya.
• Useeffect dalam komponen berfungsi: useEffect berfungsi sebagai bersamaan dengan semua kaedah kitaran hayat dalam komponen berfungsi. Ia boleh dijalankan selepas setiap render, selepas yang pertama, atau apabila kebergantungan tertentu berubah. Anda boleh mengembalikan fungsi pembersihan untuk mengendalikan tingkah laku seperti ComponentWillUnmount.

Contoh useeffect:

 <code class="javascript">import React, { useState, useEffect } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); useEffect(() => { document.title = `Count: ${count}`; // Cleanup function return () => { document.title = 'React App'; }; }, [count]); return ( <div> <p>Count: {count}</p> <button onclick="{()"> setCount(count 1)}>Increment</button> </div> ); }</code>

Bagaimanakah pengurusan keadaan React mempengaruhi komponen semula komponen, dan teknik apa yang boleh digunakan untuk mengoptimumkan prestasi dalam kedua-dua kelas dan komponen berfungsi?

Kesan Pengurusan Negeri pada Rendering semula:

• Perubahan Negeri: Apabila keadaan berubah dalam komponen, React akan membuat semula komponen dan anak-anaknya. Ini memastikan UI tetap selari dengan data aplikasi.
• STOUNDCOMENTUPDATE DAN MEMO: Dalam komponen kelas, anda boleh menggunakan shouldComponentUpdate untuk mengelakkan pengendali semula yang tidak perlu dengan mengembalikan false jika prop atau negeri baru tidak menyebabkan perubahan visual. Dalam komponen fungsional, React.memo berfungsi dengan tujuan yang sama, mencegah pengendali semula jika prop tidak berubah.

Teknik Pengoptimuman:

1. Komponen Murni: Gunakan React.PureComponent untuk komponen kelas. Ia melaksanakan shouldComponentUpdate dengan perbandingan prop dan perbandingan cetek.
2. React.Memo: Bungkus komponen fungsional dengan React.memo untuk mengelakkan pengendali semula yang tidak perlu jika prop adalah sama.
3. USECallback dan Usememo: Dalam komponen berfungsi, gunakan useCallback untuk memoize fungsi panggil balik dan useMemo untuk memoize nilai-nilai yang dikira, mencegah pengkomputeran semula yang tidak perlu.
4. PROP KEY: Apabila menyenaraikan senarai, gunakan prop key untuk membantu bertindak balas mengenal pasti item yang telah berubah, telah ditambah, atau telah dikeluarkan.
5. Pemisahan kod dan pemuatan malas: Suspense React.lazy .
6. Virtualisasi: Untuk membuat senarai besar, gunakan perpustakaan virtualisasi seperti react-window atau react-virtualized untuk menjadikan hanya item yang kelihatan.

Contoh pengoptimuman dengan memo dan usecallback:

 <code class="javascript">import React, { useState, useCallback } from 'react'; const ChildComponent = React.memo(function ChildComponent({ onClick }) { console.log('ChildComponent rendered'); return <button onclick="{onClick}">Click me</button>; }); function ParentComponent() { const [count, setCount] = useState(0); const handleClick = useCallback(() => { setCount(count 1); }, [count]); return ( <div> <p>Count: {count}</p> <childcomponent onclick="{handleClick}"></childcomponent> </div> ); }</code>

Dalam contoh ini, ChildComponent hanya akan membuat semula jika perubahan onClick , terima kasih kepada React.memo dan useCallback .

Atas ialah kandungan terperinci Apakah keadaan dalam React? Bagaimana anda menguruskan negeri dalam kelas dan komponen berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!