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 китепканалары менен интеграциялоо үчүн ыңгайлуу.

Мурунку Кийинки