React의 제어된 구성요소 인스턴스와 제어되지 않은 구성요소 인스턴스에 대한 자세한 설명

이 글에서는 React의 제어되는 구성 요소와 비제어 구성 요소의 예에 대한 자세한 설명을 공유하겠습니다. 자세한 설명에 앞서 제어되는 구성 요소와 비제어 구성 요소가 무엇인지 간략하게 소개하겠습니다.

Controlled Component

React에서는 폼의 상태가 변경될 때마다 해당 컴포넌트의 상태에 기록됩니다. 이러한 유형의 컴포넌트를 React에서는 Controlled Component라고 합니다. 제어되는 구성 요소에서 구성 요소의 렌더링 상태는 해당 값에 해당하거나 확인되었습니다. React는 이러한 방식으로 구성 요소의 로컬 상태를 제거합니다. React는 공식적으로 제어되는 구성요소 사용을 권장합니다.

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

1. 可以通过在初始state中设置表单的默认值。
2. 每当表单的值发生变化时，调用onChange事件处理器。
3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。
4. setState触发视图的重新渲染，完成表单组件值得更新。

제어되지 않은 구성 요소

간단히 말하면 양식 구성 요소에 값 prop이 없으면(라디오 버튼과 확인란이 선택된 prop에 해당함) 비제어 제어 구성 요소라고 부를 수 있습니다. 이러한 방식으로 defaultValue 및 defaultChecked를 사용하여 구성 요소의 기본 상태를 나타낼 수 있습니다.

React에서 제어되지 않는 구성 요소는 해당 값이 구성 요소의 자체 상태나 props에 의해 제어되지 않습니다. 일반적으로 렌더링된 기본 DOM 요소에 액세스하려면 ref prop을 추가해야 합니다.

제어되는 구성 요소와 제어되지 않는 구성 요소 비교

폼의 기본값이 defaultValue 또는 defaultChecked를 통해 설정되는 것을 확인했습니다. 한 번만 렌더링되며 이후 렌더링에서는 작동하지 않습니다.

<input
    value={this.state.value}
    onChange={(e) => this.setState({value: e.target.value})}
>

<input 
    defaultValue={this.state.value}
    onChange={e => {this.setState({value: e.target.value})}}
>

제어되는 구성 요소에서는 책에 입력된 내용이 출력되고 표시될 수 있지만 제어되지 않는 구성 요소에서는 onChange 이벤트가 바인딩되지 않으면 텍스트 상자에 입력한 내용이 표시되지 않습니다. 제어되는 구성 요소와 제어되지 않는 구성 요소의 가장 큰 차이점은 제어되지 않는 구성 요소의 상태가 응용 프로그램 상태에 의해 제어되지 않는다는 점이며, 응용 프로그램에는 로컬 구성 요소 상태도 있고 제어되는 구성 요소의 값은 상태에서 나온다는 점을 알 수 있습니다. .

• 성능 문제

제어 구성 요소에서 onChange 시간 프로세서는 양식 값이 변경될 때마다 호출되므로 일부 성능이 소모되며 여전히 React 제어 구성 요소에서 사용하는 것이 권장되지 않습니다. , 이 문제는 상태 통합을 달성하기 위해 redux 애플리케이션 아키텍처를 통해 달성될 수 있습니다.

관련 권장 사항:

React 구성 요소 수명 주기 예제 분석

React 구성 요소의 수명 주기 기능은 무엇입니까

React 구성 요소를 구축하는 가장 완벽한 방법

위 내용은 React의 제어된 구성요소 인스턴스와 제어되지 않은 구성요소 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!