Middle

Дар бораи фарқиятҳои байни компонентҳои идорашаванда ва беидорашаванда дар React гап занед.

sobes.tech AI

Ҷавоб аз AI

Компоненттер өз күйүн useState (жеки класстардын this.state) аркылуу башкарат жана маалыматтарды жана керектүү кайрылууларды пропстар аркылуу алат. Мисалы, форма абалы Reactтин күйүндө сакталат жана onChange иштетүүчүлөр аркылуу жаңыртылат.

Баскычсыз компоненттер DOM ичинде өз абалдарын сактайт. Алардын маанисине жетүү үчүн useRef (же класстагы React.createRef) колдонулат, ал DOM элементине шилтемени алууга мүмкүндүк берет. Мисалы, форма элементтеринин мааниси түздөн-түз DOMдон алынат, сабитүүдө.

Өзгөчөлүк	Башкарылуучу компонент	Башкарылбаган компонент
Абалды башкаруу	React күйү (`useState`)	DOM
Мааниге жетүү	Күй жана пропстар аркылуу	Refs (`useRef`)
Жаңыртуу	Реактивдүү, ар бир өзгөрүүдө	Ачык иш-аракетте (мисалы, сабитүүдө)
Валидация	React логикасында	Стандарт HTML API аркылуу же кол менен маанини алуу кийин

Башкарылуучу компоненттин мисалы:

import React, { useState } from 'react';

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

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

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

Башкарылбаган компоненттин мисалы:

import React, { useRef } from 'react';

function UncontrolledInput() {
  const inputRef = useRef(null);

  const handleClick = () => {
    alert('Input мааниси: ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Мәнин алуу</button>
    </>
  );
}

Алардын ортосунда тандоо логиканын кыйынчылыгына жана киргизүүнүн өзгөрүшүнө тез реакция керектигине жараша болот. Башкарылуучу компоненттер татаал формалар жана реалдуу убакытта валидация үчүн артыкчылыкка ээ. Башкарылбаган компоненттер жөнөкөй формалар үчүн же сырттан келген DOM китепканалары менен интеграциялоо үчүн ыңгайлуу.

Гузашта Оянда