반응 제어 구성 요소 란 무엇입니까?

React에서 제어되는 구성 요소는 콜백 함수를 통해 현재 값을 업데이트하는 구성 요소를 의미하며, 양식을 렌더링하는 React 구성 요소는 양식의 상태가 변경될 때마다 양식에서 발생하는 작업도 제어합니다. 이는 컴포넌트의 상태에 기록될 것입니다. 이러한 유형의 컴포넌트를 React에서는 제어되는 컴포넌트라고 합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React 제어 구성 요소는 무엇인가요?

양식을 렌더링하는 React 구성 요소는 사용자 입력 중에 양식에서 발생하는 작업도 제어합니다. 이런 방식으로 React에 의해 값이 제어되는 양식 입력 요소를 "제어 컴포넌트"라고 합니다.

일부 네티즌들은 이렇게 설명했습니다. React에서는 폼의 상태가 바뀔 때마다 컴포넌트의 상태에 기록됩니다. 이런 유형의 컴포넌트를 React에서는 제어되는 컴포넌트라고 합니다.

제어 구성 요소 업데이트 프로세스:

• 1. 초기 상태에서 양식의 기본값을 설정할 수 있습니다.

• 2. 양식 값이 변경될 때마다 onChange 이벤트 핸들러

• 를 호출합니다.

  3. 이벤트 프로세서는 이벤트 객체 e를 통해 변경된 상태를 가져오고 상태를 변경합니다.

• 4. setState는 뷰 업데이트를 트리거하여 양식 구성 요소 값의 업데이트를 완료합니다. 콜백 함수 OnChange와 같은 현재 값을 업데이트합니다. 상위 구성 요소는 콜백 함수를 통해 상태를 제어 및 관리하고 새 값을 속성으로 전달합니다. 제어되는 구성요소는 "단순한 구성요소"라고도 합니다.

  const { useState } from 'react';
  function Controlled () {
    const [email, setEmail] = useState();
    const handleInput = (e) => setEmail(e.target.value);
    return <input type="text" value={email} onChange={handleInput} />;
  }

확장된 지식:

제어되지 않는 구성요소란 무엇인가요? 제어되지 않는 구성 요소는 내부적으로 자체 상태를 저장하는 구성 요소입니다. 필요할 때 ref를 사용하여 DOM에 쿼리하여 현재 값을 찾을 수 있습니다. 전통적인 HTML과 비슷합니다. 대부분의 기본 React 양식 구성 요소는 제어됨 및 제어되지 않음을 지원합니다.

const { useRef } from 'react';
function Example () {
  const inputRef = useRef(null);
  return <input type="text" defaultValue="bar" ref={inputRef} />
}

4 둘 사이의 차이점은 무엇인가요?

제어 구성 요소에서 양식 데이터는 React 구성 요소에 의해 처리됩니다. 제어되지 않는 구성 요소에서 양식 데이터는 DOM 자체에 의해 처리됩니다.

제어되는 구성 요소의 경우 구성 요소 상태를 사용해야 합니다. 제어되지 않는 구성 요소의 경우 상태 사용은 완전히 선택 사항이지만 Refs는 해당 구성 요소 내에서 사용해야 합니다.

제어되는 구성 요소의 경우 입력 시 유효성을 검사할 수 있지만 제어되지 않는 구성 요소의 경우에는 유효성을 검사할 수 없습니다.

【관련 추천:

javascript 비디오 튜토리얼

,

web front-end

】

위 내용은 반응 제어 구성 요소 란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!