Պատմեք React-ում կառավարելի և ոչ կառավարելի կոմպոնենտների տարբերությունների մասին։

Կառավարվող կոմպոնենտները կառավարում են իրենց վիճակը useState (կամ դասական this.state) միջոցով և ստանում են տվյալները և վերականգնման ֆունկցիաները որպես ատրիբուտներ։ Օրինակ, ձևի վիճակը պահվում է React-ի վիճակում և թարմացվում է onChange handlers-ով։

Անկառավարվող կոմպոնենտները պահում են իրենց վիճակը DOM-ի ներսում։ Դրանց արժեքին հասնելու համար օգտագործվում է useRef (կամ դասական React.createRef), որը տալիս է հղում DOM տարրին։ Օրինակ, ձևի տարրերի արժեքը ստացվում է ուղղակիորեն DOM-ից սուբմիտ ժամանակ։

Գծագիր	Կառավարվող կոմպոնենտ	Անկառավարվող կոմպոնենտ
Վիճակի կառավարում	React State (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('Մուտքի արժեքը՝ ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Արդյունքը ստանալ</button>
    </>
  );
}

Նրանց միջև ընտրությունը կախված է լոգիկայի բարդությունից և անհրաժեշտությունից՝ անմիջական արձագանք փոփոխություններին։ Կառավարվող կոմպոնենտները նախընտրելի են բարդ ձևանմուշների և իրական ժամանակում վալիդացիայի համար։ Անկառավարվող կոմպոնենտները հարմար են պարզ ձևանմուշների կամ երրորդ կողմի DOM գրադարանների ինտեգրման համար։