Komponen Terkawal lwn Tidak Terkawal dalam React

Komponen Terkawal: Komponen Bertindak balas yang mengawal keadaan unsur bentuk melalui keadaan atau prop, iaitu setiap mutasi keadaan akan mempunyai fungsi pengendali yang berkaitan.

Ciri-ciri

• Nilai dikawal oleh keadaan - nilai elemen terikat kepada pembolehubah keadaan
• Memerlukan pengendali acara - Untuk mengemas kini keadaan yang anda perlukan pengendali acara
• Boleh Diramal - Memandangkan keadaan komponen mewakili nilai input, komponen boleh diramal dan mudah untuk nyahpepijat
• React Mengendalikan data input dan tidak bergantung pada DOM untuk menjejaki nilai input semasa

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <form>
      <input 
        type="text" 
        value={value} 
        onChange={handleChange} 
      />
    </form>
  );
}

Komponen Tidak Terkawal: Komponen Reaksi di mana DOM sendiri mengendalikan keadaan elemen borang. React mengakses nilai input melalui ref, yang menyimpan keadaannya sendiri secara dalaman, dan anda menanyakan DOM menggunakan ref untuk mencari nilai semasanya apabila anda memerlukannya. Ini sedikit lebih seperti HTML tradisional.

Ciri-ciri

• Nilai dikawal oleh DOM - Nilai medan input tidak terikat pada pembolehubah keadaan.
• Menggunakan Ref untuk mengakses nilai atau untuk mendapatkan nilai elemen input apabila diperlukan
• Ia lebih mudah untuk disediakan jika anda tidak memerlukan kawalan masa nyata ke atas input.
• Sesuai untuk senario di mana keadaan tindak balas tidak diperlukan untuk mengawal input.

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('Input Value: ' + inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

Berikut ialah jadual perbandingan antara komponen terkawal dan tidak terkawal:

Bila hendak digunakan bila
Dikawal - untuk pengesahan masa nyata, pemformatan input atau maklum balas segera.
Tidak terkawal - digunakan untuk kes penggunaan mudah seperti muat naik fail nilai borang praisi tidak kerap atau perlu ditangguhkan sehingga penyerahan borang.

Atas ialah kandungan terperinci Komponen Terkawal lwn Tidak Terkawal dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!