Apakah getDerivedStateFroprops ()?

Apakah getDerivedStateFromprops ()?

getDerivedStateFromProps adalah kaedah kitaran hayat statik dalam React yang membolehkan anda mengemas kini keadaan komponen berdasarkan perubahan pada alat peraganya. Ia dipanggil betul sebelum proses rendering apabila komponen menerima alat baru. Kaedah ini mengambil dua parameter: nextProps dan prevState , dan ia mesti mengembalikan objek untuk mengemas kini keadaan atau null untuk menunjukkan tiada perubahan kepada keadaan diperlukan. Ia adalah pengganti kaedah componentWillReceiveProps yang telah ditetapkan dan digunakan untuk mengendalikan senario di mana anda perlu bertindak balas terhadap perubahan prop dan mengemas kini keadaan komponen dengan sewajarnya.

Inilah contoh mudah bagaimana ia boleh digunakan:

 <code class="jsx">class ExampleComponent extends React.Component { static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.someProp !== prevState.someProp) { return { someProp: nextProps.someProp }; } return null; } constructor(props) { super(props); this.state = { someProp: props.someProp, }; } render() { return <div>{this.state.someProp}</div>; } }</code>

Bilakah anda harus menggunakan getDerivedStatefroprops () dalam React?

getDerivedStateFromProps harus digunakan dalam senario tertentu di mana anda perlu mengemas kini keadaan komponen sebagai tindak balas kepada perubahan dalam alat komponen. Beberapa kes penggunaan biasa termasuk:

1. Menetapkan semula keadaan: Jika perubahan prop menunjukkan tindakan semula, anda mungkin menggunakan kaedah ini untuk menetapkan semula bahagian negara anda.
2. Memperolehi Negeri dari Props: Apabila keadaan komponen harus selalu dikira dari propnya, anda boleh menggunakan getDerivedStateFromProps untuk mengemas kini negara berdasarkan nilai prop baru.
3. Mengendalikan Kemas Kini Asynchronous: Apabila berurusan dengan pemuatan data tak segerak, anda mungkin menggunakan kaedah ini untuk memastikan keadaan dikemas kini apabila alat baru tiba.

Sebagai contoh, jika anda membina komponen borang di mana prop menunjukkan sama ada borang itu dalam keadaan 'menetapkan semula', anda boleh menggunakan getDerivedStateFromProps untuk menetapkan semula keadaan dalaman borang apabila prop 'Reset' ditetapkan untuk benar:

 <code class="jsx">class FormComponent extends React.Component { static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.resetForm && nextProps.resetForm !== prevState.resetForm) { return { formData: {}, resetForm: nextProps.resetForm, }; } return null; } constructor(props) { super(props); this.state = { formData: {}, resetForm: props.resetForm, }; } render() { return <form>{/* form elements */}</form>; } }</code>

Bagaimanakah GetDerivedStateFromprops () mempengaruhi prestasi komponen?

Penggunaan getDerivedStateFromProps boleh mempunyai kesan positif dan negatif terhadap prestasi komponen:

Impak positif:

• Kemas kini segerak: Sejak getDerivedStateFromProps berjalan serentak sebelum membuat rendering, ia memastikan bahawa negara dikemas kini sebelum komponen komponen, yang dapat membantu mengelakkan para peniaga yang tidak perlu.
• Pengoptimuman Kemas Kini Negeri: Dengan hanya mengemas kini keadaan apabila perlu (kembali null apabila tiada kemas kini diperlukan), anda boleh mengelakkan kemas kini keadaan yang tidak perlu.

Kesan negatif:

• Pengiraan tambahan: Setiap kali komponen menerima alat baru, getDerivedStateFromProps dipanggil, yang boleh membawa kepada overhead pengiraan tambahan, terutama jika logik di dalam kaedah itu kompleks.
• Potensi untuk Gelung Infinite: Jika tidak dilaksanakan dengan teliti, getDerivedStateFromProps boleh membawa kepada gelung tak terhingga jika perubahan keadaan mencetuskan kemas kini prop selanjutnya, yang seterusnya mencetuskan lebih banyak kemas kini negeri.

Untuk mengurangkan isu -isu prestasi, penting untuk memastikan logik di dalam getDerivedStateFromProps sebagai mudah dan cekap yang mungkin dan untuk memastikan bahawa kemas kini negeri hanya dibuat apabila perlu.

Apakah perangkap biasa untuk dielakkan apabila menggunakan getDerivedStateFromprops ()?

Apabila menggunakan getDerivedStateFromProps , terdapat beberapa perangkap biasa untuk mengetahui dan mengelakkan:

1. Gelung Infinite: Berhati -hati untuk mencipta gelung kemas kini yang tidak terhingga. Sebagai contoh, jika mengemaskini keadaan menyebabkan penekanan semula yang mengubah prop, yang seterusnya mengubah keadaan sekali lagi, anda boleh berakhir dalam kitaran yang tidak berkesudahan. Sentiasa pastikan bahawa getDerivedStateFromProps hanya mengemas kini menyatakan apabila perlu.
2. Berlebihan: Jangan gunakan getDerivedStateFromProps untuk setiap perubahan prop. Ia hanya boleh digunakan untuk senario di mana negara perlu diperolehi daripada alat peraga. Untuk kemas kini negeri lain, gunakan kaedah lain seperti pengendali acara atau kaedah kitaran hayat lain.
3. Pengurusan Negeri yang tidak betul: Elakkan menggunakan getDerivedStateFromProps untuk persediaan keadaan awal. Pembina adalah tempat yang lebih baik untuk menetapkan keadaan awal. Gunakan getDerivedStateFromProps untuk mengemas kini negeri berdasarkan perubahan prop selepas penampilan awal.
4. Mengabaikan prevState : Sentiasa bandingkan nextProps dengan prevState untuk memastikan anda tidak mengemas kini keadaan tidak perlu. Ini dapat membantu mencegah penahan semula yang tidak perlu dan meningkatkan prestasi.
5. Kerumitan: Pastikan logik di dalam getDerivedStateFromProps mudah. Logik kompleks boleh membawa kepada isu -isu prestasi dan menjadikan komponen lebih sukar untuk difahami dan dikekalkan.

Inilah contoh perangkap yang sama untuk mengelakkan:

 <code class="jsx">class BadExample extends React.Component { static getDerivedStateFromProps(nextProps, prevState) { // This will cause an infinite loop because it's not comparing nextProps with prevState return { someProp: nextProps.someProp }; } render() { return <div>{this.state.someProp}</div>; } }</code>

Dengan menyedari perangkap -perangkap ini dan melaksanakan getDerivedStateFromProps dengan teliti, anda dapat menggunakan kaedah kitaran hayat ini dengan berkesan untuk menguruskan negara berdasarkan perubahan prop dalam komponen React anda.

Atas ialah kandungan terperinci Apakah getDerivedStateFroprops ()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!