Dalam reaksi, komponen yang tidak dikontrol adalah komponen yang tidak dikontrol oleh komponen induknya; komponen yang tidak dikontrol adalah komponen independen yang tidak perlu memberikan nilai dan tidak memiliki perpotongan dengan komponen induk dari komponen saat ini sebuah komponen, hanya Komponen saat ini akan dienkapsulasi sebagai komponen yang tidak terkontrol jika hanya digunakan untuk tujuan tampilan dan tidak membuat perbedaan apa pun.
Lingkungan operasi tutorial ini: Sistem Windows 10, reaksi versi 17.0.1, komputer Dell G3.
Apa yang dimaksud dengan komponen yang tidak terkontrol?
Kita mulai dengan dua kata, yaitu komponen Terkendali dan tidak terkendali adalah konsep dari sudut pandang komponen. Arti harafiahnya adalah komponen tidak dikendalikan, tidak dikendalikan oleh siapapun, tentunya tidak oleh komponen induknya, lalu apa adanya ciri-ciri komponen yang tidak terkendali? Artinya, semua logika hanya berhubungan dengan dirinya sendiri dan tidak ada komunikasi atau persinggungan dengan komponen lainnya.
Dalam HTML, elemen bentuk seperti , , dan mempertahankan statusnya sendiri dan diperbarui berdasarkan masukan pengguna. Namun di React, semua komponen ini adalah komponen yang tidak dikontrol tanpa pemrosesan, karena ketika Anda benar-benar menggunakannya, Anda akan menemukan bahwa komponen-komponen ini tidak akan secara otomatis memperbarui nilainya. Nilai yang kami masukkan tanpa pemrosesan apa pun tidak dapat memasukkan nilai
Contoh
import React, { Component } dari 'react';import ReactDOM dari 'react-dom';class Demo1 extends Component { render() { return ( <input /> //<ABC /> ) }}ReactDOM.render(<Demo1 />, document.getElementById('konten'))Penjelasan komponen yang tidak terkontrol
Karena komponen yang tidak terkontrol adalah komponen yang tidak bersinggungan dengan dunia luar, maka kita tidak bisa lagi menggunakan komponen yang tidak terkontrol. Jawabannya adalah tidak.
Komponen carousel (tidak terkontrol), pikirkan apakah halaman kita memerlukan komponen carousel, dan komponen tersebut hanya digunakan sekali dan tidak dimaksudkan untuk digunakan kembali. Kita masukkan kode carousel ke dalam komponen carousel tidak perlu berinteraksi dengan dunia luar, jadi ketika komponen carousel yang kita tulis di-hardcode terlepas dari bagaimana grafik carousel saat ini berjalan, termasuk peristiwa klik, waktu carousel, dan kondisi lainnya, maka komponen carousel tersebut adalah komponen yang tidak terkontrol Tentu saja, contoh ini agak dibuat-buat. Saat kita membuat komponen, kita harus menginginkan komponen yang universal dan dapat digunakan kembali. Kita perlu mengetahui status carousel saat ini, yang akan menyebabkan komponen yang tidak terkontrol tidak dapat diterapkan lagi.
Pengembangan halaman statis. Saat mengembangkan halaman statis, kami biasanya tidak menggunakan kerangka kerja dan hanya menggunakan HTML untuk menulis file terpisah. Performanya mungkin lebih baik setelah pengemasan. Halaman yang ditampilkan oleh komponen tidak terkontrol kami tidak memiliki enkapsulasi dan hanya dapat dikustomisasi. Jika komponen halaman kami ada sendiri, maka halaman tersebut merupakan komponen tidak terkontrol.
Komponen yang tidak terkontrol adalah komponen independen yang tidak perlu memberikan nilai dan tidak memiliki perpotongan dengan komponen induk dari komponen saat ini, saat kita merangkum komponen tersebut, komponen tersebut hanya akan digunakan jika komponen saat ini hanya untuk tujuan tampilan dan tidak ada perbedaan
Perluas pengetahuan Anda:
Apa yang dimaksud dengan komponen terkontrol?
Ini kebalikan dari komponen yang tidak terkontrol. Secara harfiah berarti komponen yang dikendalikan oleh komponen induk.
Cara komponen induk mengontrol komponen anak tentu saja dikontrol dengan meneruskan nilai. Ketika nilai props digunakan oleh komponen anak, dan konten atau metode atau hasil tampilan komponen anak diubah karena nilai yang diteruskan oleh komponen induk. , komponen anak adalah komponen Terkendali yang dikendalikan oleh komponen induk
Contoh
impor React,{Komponen} dari 'react';impor ReactDOM dari 'react-dom';kelas Input memperluas Komponen{ konstruktor(){ super(); this.state = {val:''}; =>{ biarkan val = event.target.value; this.setState({val}) } render(){ kembali ( <div> <p>{this.state.val}</p> //<tipe masukan= "text" value='123' /> <input type="text" value={this.state.val} onChange={this.handleChange} /> //Input adalah komponen terkontrol yang dikontrol oleh properti objek status </ div> ) }}ReactDOM.render(<Input/>,window.app)Kita tidak boleh menganggap masukan sebagai komponen masukan. Kita harus menganggap masukan sebagai komponen apa pun yang kita referensikan atau rangkum sendiri. Setelah komponen ini kita berikan nilai, meskipun itu adalah string tetap yang kita lewati, pada dasarnya tetap saja sama seperti komponen masukan. Komponen yang dikontrol tidak melihat apakah ada pengikatan data dua arah, tetapi apakah sifatnya terkontrol. Ketika kita melewatkan nilai tetap, nilai komponen masukan tetap dan tidak bisa diubah, meskipun props yang kita lewati adalah nilai hard-coded, namun nilai ini tetap mengontrol komponen input.
Penjelasan komponen yang dikendalikan
Komponen terkontrol sebenarnya muncul di setiap aspek pemrograman kami. Komponen apa pun yang kami ambil sendiri kemungkinan besar merupakan komponen terkontrol. Bagaimanapun, permintaan untuk halaman statis masih kecil, dan js kami menangani sebagian besar logika harus interaktif.
Misalnya, kode komponen input di atas setara dengan textarea dan komponen yang dipilih. Kita semua perlu meneruskan beberapa parameter (props) untuk menginformasikan aturan rendering tertentu dan menampilkan konten komponen. Misalnya, atribut type juga merupakan cara bagi kita untuk mengontrol komponen.
Pengikatan data dua arah: Faktanya, ketika kita meneruskan nilai atau atribut apa pun ke nilai, arti dari komponen tersebut telah diubah menjadi komponen yang dikontrol, tetapi ketika kita mengikat onChange, perubahan data diberikan ke komponen kita melalui onChange. Dalam metode panggilan balik, kami mengubah data melalui setState untuk dirender ulang. Ini adalah pengikatan data dua arah. Data menggerakkan tampilan, dan tampilan menggerakkan data.
Ringkasan: Komponen terkontrol dan komponen tidak terkontrol adalah konsep yang menunjukkan apakah komponen saat ini terkontrol dan apakah merupakan komponen terpisah yang tidak berinteraksi dengan konten lain. Sederhananya, komponen yang sepenuhnya independen dapat dilihat Sebagai komponen yang tidak terkontrol, semuanya lainnya komponen dikendalikan