Apakah perbezaan antara komponen terkawal tindak balas dan komponen tidak terkawal

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 komponen terkawal tindak balas dan komponen tidak terkawal

Perbezaan antara keduanya

1 >

Komponen terkawal bergantung pada keadaan

Pengubahsuaian 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 keadaan

Komponen terkawal mesti menggunakan acara onChange pada borang untuk mengikat acara yang sepadan

2 >Komponen Bukan Kawalan tidak dikawal oleh keadaan

Mendapatkan data daripada komponen tidak terkawal adalah bersamaan dengan DOM yang beroperasi

Komponen tidak terkawal boleh digabungkan dengan mudah dengan komponen pihak ketiga dan lebih mudah untuk mengintegrasikan React dan Kod Non-React

Pilih 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 d5fd7aea971a85678ba271703566ebfd , 4750256ae76b6b9d804861d8f69e79d3, 221f08282418e2996498697df914ce4e, dsb. perubahan nilai biasanya dikemas kini berdasarkan input pengguna.

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>
    )
  }
}

1 Anda boleh menetapkan nilai lalai borang dalam keadaan awal

2 borang berubah , panggil pengendali acara onChange

3 Pengendali acara mendapat keadaan berubah melalui acara objek acara dan mengemas kini keadaan komponen

4 kaedah setState, ia akan Mencetuskan pemaparan semula paparan dan melengkapkan kemas kini komponen borang

Data dalam React mengalir secara individu Daripada contoh, anda boleh melihat bahawa data borang berasal dari keadaan komponen dan disalurkan melalui prop Ini juga dipanggil Untuk pengikatan data sehala. Kemudian data baharu ditulis semula kepada keadaan melalui pengendali acara onChange, melengkapkan pengikatan data dua hala.

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>
    );
  }
}

[Cadangan berkaitan:

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!