Bagaimana anda membuat komponen yang tidak terkawal dalam React?

Bagaimana anda membuat komponen yang tidak terkawal dalam React?

Komponen yang tidak terkawal dalam React adalah di mana data bentuk dikendalikan oleh DOM itu sendiri, bukannya diuruskan oleh keadaan komponen. Untuk membuat komponen yang tidak terkawal, anda mengikuti langkah -langkah ini:

1. Gunakan Prop defaultValue : Daripada menggunakan value untuk menetapkan nilai awal elemen borang (yang akan membuatnya dikawal), anda menggunakan defaultValue . Sebagai contoh, untuk medan input, anda akan lakukan:

    <code class="jsx"><input type="text" defaultvalue="Initial Value"></code>

2. Elakkan menetapkan keadaan pada perubahan : Dalam komponen terkawal, anda akan mengemas kini keadaan pada setiap peristiwa perubahan. Untuk komponen yang tidak terkawal, anda tidak melakukan ini. Anda membiarkan DOM mengendalikan perubahan secara dalaman.

3. Mengakses data melalui ref : Oleh kerana data tidak diuruskan oleh keadaan React, anda memerlukan cara untuk mengakses nilai semasa apabila diperlukan. Anda menggunakan sistem ref React untuk membuat rujukan kepada nod DOM. Inilah cara anda melakukannya:

    <code class="jsx">class UncontrolledForm extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } render() { return ( <form onsubmit="{this.handleSubmit}"> <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> <button type="submit">Submit</button> </form> ); } }</code>

Dengan mengikuti langkah -langkah ini, anda boleh membuat komponen yang tidak terkawal dalam React, di mana data bentuk dikendalikan secara langsung oleh DOM.

Apakah faedah menggunakan komponen yang tidak terkawal dalam aplikasi React?

Menggunakan komponen yang tidak terkawal dalam aplikasi React dilengkapi dengan beberapa faedah:

1. Lebih mudah untuk dilaksanakan : Komponen yang tidak terkawal adalah lebih mudah untuk ditubuhkan kerana mereka tidak memerlukan menguruskan negara dan melaksanakan pengendali perubahan. Ini menjadikan mereka sesuai untuk bentuk mudah atau untuk pemaju yang baru bertindak balas.
2. Kod Kurang Boilerplate : Oleh kerana komponen yang tidak terkawal tidak memerlukan pengurusan negeri dan pengendali acara untuk mengemas kini keadaan, mereka biasanya menghasilkan kurang kod. Ini boleh menjadikan aplikasi lebih mudah dibaca dan diselenggara.
3. Prestasi yang lebih baik : Dengan membiarkan DOM Handle berubah secara langsung, anda boleh mencapai prestasi yang lebih baik dalam beberapa senario. Ini amat berguna untuk mengendalikan bentuk besar atau medan input berganda di mana setiap keystroke tidak mencetuskan kemas kini negeri dan membuat semula.
4. Keserasian dengan kod tidak bertindak balas : Jika anda mengintegrasikan React dengan kod bukan reaksi yang sedia ada, komponen yang tidak terkawal boleh lebih mudah untuk berfungsi kerana mereka tidak memerlukan sistem pengurusan negeri yang spesifik.
5. Berguna untuk kes penggunaan mudah : Untuk prototaip cepat atau kes penggunaan mudah, komponen yang tidak terkawal boleh menjadi lebih mudah dan lebih cepat untuk dilaksanakan tanpa memerlukan pengurusan negara yang kompleks.

Bagaimanakah anda dapat mengakses nilai komponen yang tidak terkawal dalam React?

Untuk mengakses nilai komponen yang tidak terkawal dalam React, anda biasanya menggunakan sistem ref . Inilah cara anda boleh melakukannya:

1. Buat ref : Dalam komponen anda, buat ref menggunakan React.createRef() atau cangkuk useRef dalam komponen berfungsi.

    <code class="jsx">// In a class component constructor(props) { super(props); this.inputRef = React.createRef(); } // In a functional component const inputRef = useRef(null);</code>

2. Lampirkan ref ke elemen DOM : Apabila memberikan elemen borang anda, lulus ref kepadanya.

    <code class="jsx">// Class component <input type="text" defaultvalue="Initial Value" ref="{this.inputRef}"> // Functional component <input type="text" defaultvalue="Initial Value" ref="{inputRef}"></code>

3. Akses Nilai : Anda boleh mengakses nilai komponen yang tidak terkawal apabila diperlukan, seperti penyerahan borang atau sebarang acara lain. Gunakan ref.current.value untuk mendapatkan nilai semasa.

    <code class="jsx">// In a class component handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', this.inputRef.current.value); } // In a functional component const handleSubmit = (event) => { event.preventDefault(); console.log('Input Value:', inputRef.current.value); }</code>

Dengan mengikuti langkah -langkah ini, anda boleh mengakses nilai komponen yang tidak terkawal secara berkesan dalam React.

Bilakah anda harus memilih komponen yang tidak terkawal berbanding yang dikawal dalam pembangunan React?

Memilih antara komponen terkawal dan tidak terkawal bergantung kepada keperluan dan kerumitan khusus projek anda. Berikut adalah beberapa senario di mana anda mungkin lebih suka komponen yang tidak terkawal:

1. Bentuk mudah : Untuk bentuk mudah di mana anda tidak memerlukan kawalan halus ke atas data bentuk, komponen yang tidak terkawal boleh menjadi lebih mudah dan lebih cepat untuk dilaksanakan.
2. Prototaip cepat : Apabila anda prototaip atau berkembang dengan cepat, komponen yang tidak terkawal boleh kurang memakan masa kerana mereka memerlukan kurang persediaan.
3. Integrasi dengan kod tidak bertindak balas : Jika anda mengintegrasikan React ke dalam aplikasi sedia ada yang tidak menggunakan React, komponen yang tidak terkawal mungkin lebih mudah untuk bekerja dengan kerana mereka menyelaraskan lebih rapat dengan manipulasi DOM tradisional.
4. Kebimbangan Prestasi : Dalam aplikasi di mana prestasi adalah kritikal, terutamanya dengan bentuk yang besar, komponen yang tidak terkawal mungkin menawarkan prestasi yang lebih baik kerana mereka tidak mencetuskan semula setiap perubahan.
5. Penyelenggaraan Kod Legacy : Jika anda bekerja dengan kod sedia ada yang sudah menggunakan komponen yang tidak terkawal, mungkin lebih mudah untuk melekat dengan corak yang sama untuk konsistensi dan kemudahan penyelenggaraan.
6. Apabila pengurusan negeri tidak diperlukan : jika data borang tidak perlu diuruskan oleh keadaan React (contohnya, untuk input carian mudah), komponen yang tidak terkawal boleh menjadi lebih mudah.

Secara umum, jika anda memerlukan lebih banyak kawalan ke atas data borang dan pengesahannya, komponen terkawal adalah pilihan yang lebih baik. Walau bagaimanapun, untuk senario yang lebih mudah atau prestasi kritikal, komponen yang tidak terkawal boleh menjadi baik.

Atas ialah kandungan terperinci Bagaimana anda membuat komponen yang tidak terkawal dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!