Apakah yang dimaksudkan dengan komponen tidak terkawal bertindak balas?

Secara tindak balas, komponen tidak terkawal ialah komponen yang tidak dikawal oleh komponen induknya; komponen tidak terkawal adalah komponen bebas yang tidak perlu melepasi nilai dan tidak mempunyai sebarang persilangan dengan komponen induk komponen semasa. Apabila membungkus komponen, ia akan dikapsulkan sebagai komponen tidak terkawal hanya jika komponen semasa hanya untuk tujuan paparan dan tidak membuat sebarang perbezaan.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah yang dimaksudkan dengan komponen tidak terkawal bertindak balas?

Apakah komponen tidak terkawal

Kita mulakan dengan dua perkataan iaitu komponen, subjek Controlled dan uncontrolled are konsep dari perspektif komponen Maksud literal adalah bahawa komponen tidak dikawal oleh sesiapa sahaja sendiri, dan tidak mempunyai komunikasi atau persilangan dengan komponen lain

Dalam HTML, membentuk elemen seperti,, dan akan mengekalkan keadaan dan kemas kini mereka sendiri berdasarkan input pengguna. Tetapi dalam React, komponen ini semuanya adalah komponen yang tidak terkawal tanpa pemprosesan, kerana apabila anda benar-benar menggunakannya, anda akan mendapati bahawa komponen ini tidak akan mengemas kini nilai secara automatik Nilai yang kami masukkan tanpa sebarang pemprosesan adalah Tidak dapat mendapatkan

contoh menggunakan nilai input

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
    render() {
        return (
            <input />
            //<ABC />
        )
    }
}
ReactDOM.render(<Demo1/>, document.getElementById(&#39;content&#39;))

Penjelasan komponen tidak terkawal

Oleh kerana komponen yang tidak dikawal adalah Komponen yang tidak mempunyai persimpangan dengan dunia luar, maka kita menang 'tidak boleh menggunakan komponen yang tidak terkawal Jawapannya adalah tidak Dalam keadaan tertentu, kami sebenarnya menggunakan komponen karusel

(Tidak terkawal), fikirkan jika halaman kami memerlukan komponen karusel, dan komponen itu hanya digunakan sekali dan tidak bertujuan untuk digunakan semula Jika kita meletakkan kod karusel ke dalam komponen karusel, adakah komponen karusel perlu berinteraksi dengan dunia luar, maka apabila kita menulis komponen karusel itu? dikodkan dengan keras tanpa mengira cara graf karusel semasa berjalan, termasuk peristiwa klik, masa karusel dan syarat lain, maka komponen karusel adalah komponen yang tidak terkawal, sudah tentu contoh ini agak tidak masuk akal Apabila kita membuat komponen, kita mesti mahu komponen universal dan boleh digunakan semula. Kita perlu mengetahui status semasa karusel, yang akan menyebabkan komponen tidak terkawal kita tidak lagi boleh digunakan

Pembangunan halaman statik, biasanya kita tidak menggunakan rangka kerja dan hanya menggunakan html untuk menulis fail berasingan Prestasinya mungkin lebih baik selepas pembungkusan, tetapi jika halaman tertentu dalam projek kami adalah halaman statik, adakah kami Halaman yang tidak terkawal digunakan halaman. Apabila komponen halaman kami wujud secara bersendirian, ia adalah komponen tidak terkawal

Komponen tidak terkawal ialah komponen bebas yang tidak perlu melepasi nilai dan tidak mempunyai sebarang persilangan dengan komponen induk semasa komponen. Apabila kita merangkum komponen, ia hanya digunakan untuk tujuan paparan dan tidak mempunyai apa-apa yang berbeza Hanya kemudian ia akan dikapsulkan ke dalam komponen yang tidak terkawal

Pengetahuan lanjutan:

Apakah komponen terkawal

Ini adalah bertentangan dengan komponen tidak terkawal Ia secara literal bermaksud komponen yang dikawal oleh komponen induk

Bagaimana komponen induk mengawal komponen anak, sudah tentu Kawalan dengan menghantar nilai Apabila nilai prop digunakan oleh komponen anak, dan kandungan atau kaedah atau hasil paparan komponen anak diubah disebabkan oleh. nilai yang diluluskan oleh komponen induk, komponen anak ialah komponen terkawal yang dikawal oleh komponen induk

Contoh

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
    constructor(){
        super();
        this.state = {val:''};
    }
    handleChange=(event)=>{
        let val = event.target.value;
        this.setState({val})
    }
    render(){
        return (
            <div>
                <p>{this.state.val}</p>
                //<input type="text" value=&#39;123&#39; />
                <input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
            </div> 
        )
    }
}
ReactDOM.render(<Input/>,window.app)

Kami tidak menganggap input sebagai komponen input anggap input sebagai mana-mana komponen yang kita rujuk atau rangkumkan sendiri Apabila komponen ini diberikan nilai oleh kami, walaupun ia diluluskan oleh kami Rentetan tetap yang diluluskan masih merupakan komponen terkawal pada dasarnya adalah pengikatan dua hala data, tetapi sama ada ia dikawal secara semula jadi Apabila kita melepasi nilai tetap, komponen input Nilai itu tetap dan tidak boleh diubah suai Walaupun kita melepasi nilai berkod keras apabila menghantar prop, nilai ini masih mengawal komponen input

Penjelasan komponen terkawal

Komponen terkawal sebenarnya muncul dalam semua aspek pengaturcaraan kami Mana-mana komponen yang kami keluarkan sahaja berkemungkinan besar komponen terkawal. Lagipun, permintaan untuk halaman statik masih kecil dalam kebanyakan masa Apabila berurusan dengan logik, logik mestilah interaktif

Contohnya, kod komponen input di atas adalah bersamaan dengan textarea dan pilih komponen. . Kita semua perlu meluluskan beberapa parameter (props) untuk memaklumkan peraturan pemaparan khusus komponen Dan memaparkan kandungan, sebagai contoh, atribut jenis juga merupakan sejenis pengikatan dua hala bagi data

yang kami. kawalan dalam komponen: Sebenarnya, apabila kami menghantar sebarang nilai atau atribut kepada nilai, makna komponen telah diubah ia menjadi komponen terkawal, tetapi apabila kami mengikat onChange, onChange memberikan komponen kami kaedah panggil balik apabila data berubah. . Dalam kaedah panggil balik, kami menukar data melalui setState untuk memaparkan semula Ini ialah data pengikatan dua hala, paparan dipacu data, data dipacu paparan

Ringkasan: Komponen terkawal dan komponen tidak terkawal adalah konsep yang menunjukkan sama ada komponen semasa dikawal dan sama ada ia adalah komponen berasingan yang tidak mempunyai interaksi dengan kandungan lain, ia adalah komponen yang bebas sepenuhnya sebagai komponen tidak terkawal dan komponen lain dikawal

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Atas ialah kandungan terperinci Apakah yang dimaksudkan dengan komponen tidak terkawal bertindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!