Perbezaan antara komponen terkawal tindak balas dan komponen tidak terkawal: 1. Komponen terkawal bergantung pada keadaan, manakala komponen tidak terkawal tidak dikawal oleh keadaan; 2. Komponen terkawal hanya boleh mewarisi "React.Component" Hanya pewarisan boleh mempunyai keadaan , manakala komponen tidak terkawal tidak mempunyai keadaan hanya melalui pewarisan; 3. Komponen terkawal biasanya digunakan apabila nilai awal perlu ditetapkan secara dinamik, dan komponen tidak terkawal biasanya digunakan apabila tiada maklumat nilai awal dinamik.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.
Perbezaan antara keduanya
1 >
Komponen terkawal bergantung pada keadaanPengubahsuaian komponen terkawal akan dipetakan kepada nilai keadaan dalam masa nyata Pada masa ini, kandungan input boleh disahkan Komponen terkawal hanya dengan mewarisi React.Component boleh ada keadaanKomponen terkawal mesti menggunakan acara onChange pada borang untuk mengikat acara yang sepadan2 >Komponen Bukan Kawalan tidak dikawal oleh keadaanMendapatkan data daripada komponen tidak terkawal adalah bersamaan dengan DOM yang beroperasiKomponen tidak terkawal boleh digabungkan dengan mudah dengan komponen pihak ketiga dan lebih mudah untuk mengintegrasikan React dan Kod Non-ReactPilih komponen terkawal atau tidak terkawal
1. Senario penggunaan komponen terkawal: Biasanya digunakan dalam situasi di mana nilai awalnya perlu ditetapkan secara dinamik. Sebagai contoh: apabila mengedit beberapa maklumat borang, elemen borang input pada mulanya perlu memaparkan nilai tertentu yang dikembalikan oleh pelayan dan kemudian mengeditnya.
2. Senario penggunaan komponen tidak terkawal: Biasanya digunakan apabila tiada maklumat nilai permulaan dinamik. Sebagai contoh: apabila mencipta maklumat dalam borang, tiada unsur borang input mempunyai nilai awal dan memerlukan input pengguna.Pengetahuan lanjutan:
1 Komponen terkawal
Dalam HTML, teg bagi elemen borang ,
Dalam React, keadaan boleh ubah biasanya disimpan dalam sifat keadaan komponen dan hanya boleh dikemas kini menggunakan setState(), dan komponen React yang menghasilkan borang juga mengawal apa yang berlaku dalam borang pada input pengguna berikutnya situasi di mana unsur bentuk input dikawal oleh React mengubah nilainya dipanggil komponen terkawal. Sebagai contoh, ikat peristiwa onChange kepada input elemen borang Apabila keadaan input berubah, peristiwa onChange akan dicetuskan, sekali gus mengemas kini keadaan komponen.Proses kemas kini keadaan oleh komponen terkawal
import React, { Component } from 'react' export default class MyInput extends Component{ constructor(props) { super(props); this.state = { value: 0 } } handleChange = (event)=>{ this.setState({ value: event.target.value }) } render(){ return( <div> <input type="text" value={this.state.value} onChange={this.handleChange} /> </div> ) } }
2. Komponen tidak terkawal
Komponen tidak terkawal merujuk kepada data borang yang diproses oleh DOM itu sendiri. Iaitu, ia tidak dikawal oleh setState(). Ia serupa dengan input bentuk HTML tradisional Nilai input memaparkan nilai terkini.
Dalam komponen yang tidak terkawal, anda boleh menggunakan ref untuk mendapatkan nilai borang daripada DOM.Komponen tidak terkawal mengekalkan keadaannya sendiri secara dalaman semasa pelaksanaan asas, supaya sebarang input nilai oleh pengguna boleh dicerminkan pada elemen.
class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(event) { console.log('A name was submitted: ' + this.input.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" ref={(input) => this.input = input} /> </label> <input type="submit" value="Submit" /> </form> ); } }
tutorial video javascript
,bahagian hadapan web]
Atas ialah kandungan terperinci Apakah perbezaan antara komponen terkawal tindak balas dan komponen tidak terkawal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!