> 웹 프론트엔드 > 프런트엔드 Q&A > 반응 제어 구성 요소와 제어되지 않은 구성 요소의 차이점은 무엇입니까

반응 제어 구성 요소와 제어되지 않은 구성 요소의 차이점은 무엇입니까

WBOY
풀어 주다: 2022-06-27 16:59:58
원래의
5228명이 탐색했습니다.

React에서 제어되는 구성 요소와 제어되지 않는 구성 요소의 차이점: 1. 제어되는 구성 요소는 상태에 따라 달라지지만 제어되지 않는 구성 요소는 상태에 따라 제어되지 않습니다. 2. 제어되는 구성 요소는 "React.Component"를 상속하는 경우에만 상태를 가질 수 있습니다. 3. 제어되는 컴포넌트는 일반적으로 초기값을 동적으로 설정해야 할 때 사용되며, 제어되지 않는 컴포넌트는 동적 초기값 정보가 없는 경우에 일반적으로 사용됩니다.

반응 제어 구성 요소와 제어되지 않은 구성 요소의 차이점은 무엇입니까

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

리액트에서 제어되는 구성요소와 제어되지 않는 구성요소의 차이점

둘의 차이점

1. 제어되는 구성요소

제어되는 구성요소는 상태에 따라 달라집니다

제어되는 구성요소의 수정은 상태 값에 매핑됩니다. 이때 입력 내용을 실시간으로 확인할 수 있습니다

제어 컴포넌트는 React.Component를 상속한 경우에만 상태를 가질 수 있습니다

제어 컴포넌트는 해당 이벤트를 바인딩하기 위해 폼의 onChange 이벤트를 사용해야 합니다

2. 제어되지 않는 구성 요소

제어되지 않는 구성 요소는 상태에 의해 제어되지 않습니다

제어되지 않는 구성 요소에서 데이터를 얻는 것은 DOM을 운영하는 것과 같습니다

제어되지 않는 구성 요소는 타사 구성 요소와 쉽게 결합할 수 있으며, React와 Non-React를 통합하는 것이 더 쉽습니다. 동시 코드

제어된 구성요소 또는 제어되지 않은 구성요소 선택

1. 제어된 구성요소 사용 시나리오: 일반적으로 초기 값을 동적으로 설정해야 하는 상황에서 사용됩니다. 예를 들어 일부 양식 정보를 편집할 때 입력 양식 요소는 처음에 서버에서 반환된 특정 값을 표시한 다음 이를 편집해야 합니다.

2. 제어되지 않는 구성요소 사용 시나리오: 일반적으로 동적 초기값 정보가 없는 경우에 사용됩니다. 예를 들어, 양식에서 정보를 생성할 때 입력 양식 요소 중 어느 것도 초기 값을 갖지 않으며 사용자 입력이 필요합니다.

확장된 지식:

1. 제어되는 구성 요소

HTML에서 양식 요소 태그 ,