반응에서 제어되지 않는 구성 요소는 상위 구성 요소에 의해 제어되지 않는 구성 요소입니다. 제어되지 않는 구성 요소는 값을 전달할 필요가 없고 현재 구성 요소의 상위 구성 요소와 교차하지 않는 독립 구성 요소입니다. 컴포넌트를 캡슐화할 때 현재 컴포넌트가 표시 목적으로만 사용되며 아무런 차이가 없는 경우에만 제어되지 않는 컴포넌트로 캡슐화됩니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
제어되지 않는 구성 요소는 무엇입니까
두 단어로 시작합니다. 즉, 제어되는 것과 제어되지 않는 것은 구성 요소의 관점에서 본 개념입니다. 문자 그대로의 의미는 구성 요소가 제어되지 않는다는 것입니다. 물론 상위 구성 요소에 의해 제어되지 않습니다. 그러면 제어되지 않는 구성 요소의 특징은 무엇입니까? 즉, 모든 로직은 자체에만 관련되어 있으며 다른 구성 요소와 통신하거나 교차하지 않습니다. , 와 같은 양식 요소는 사용자 입력에 따라 자체 상태와 업데이트를 유지합니다. 하지만 React에서는 이러한 구성 요소가 모두 처리되지 않은 제어되지 않는 구성 요소이므로 실제로 사용할 때 이러한 구성 요소가 아무런 처리 없이 입력한 값은
Example
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Demo1 extends Component {
render() {
return (
<input />
//<ABC />
)
}
}
ReactDOM.render(<Demo1/>, document.getElementById('content'))비제어 구성 요소는 외부 세계와 교차하지 않는 구성 요소이므로 비제어 구성 요소를 사용할 필요가 없으며 대답은 '아니오'입니다. 실제로 비제어 구성 요소를 사용합니다
특정 상황에서 캐러셀 컴포넌트(비제어)가 필요한데 해당 컴포넌트가 캐러셀 컴포넌트만 사용한다면 생각해 보십시오. 현재로서는 캐러셀 코드를 캐러셀 컴포넌트에 넣을 생각이 없습니다. 캐러셀 구성 요소는 외부 세계와 상호 작용해야 합니까? 아니요, 그러면 클릭 이벤트를 포함하여 현재 캐러셀 이미지가 어떤지에 관계없이 실행되는 캐러셀을 작성합니다. 캐러셀 시간 및 기타 조건이 하드 코딩되면 캐러셀 구성 요소는 제어되지 않습니다. 물론 이 예는 다소 무리가 있습니다. 컴포넌트를 만들 때 우리는 보편적이고 재현 가능한 컴포넌트를 원해야 합니다. 정적 페이지 개발에 더 적합합니다. 정적 페이지를 개발할 때 일반적으로 프레임워크를 사용하지 않고 HTML만 사용하여 별도로 작성합니다. 파일 중 패키징 후 성능이 더 좋아질 수 있지만 프로젝트의 특정 페이지가 정적이면 페이지에서 제어되지 않는 구성 요소를 사용했습니까? 표시된 페이지에는 캡슐화가 없으며 사용자 정의된 페이지만 있을 수 있습니다. 그러면 페이지 구성 요소가 단독으로 존재하는 경우 제어되지 않는 구성 요소는 필요하지 않습니다. 값을 전달하고 현재 구성 요소의 상위 구성 요소와 교차하지 않습니다. 우리의 경우 구성 요소를 캡슐화할 때 현재 구성 요소가 표시 목적으로만 사용되며 차이가 없는 경우에만 제어되지 않는 구성 요소로 캡슐화됩니다.
확장된 지식:
제어되는 구성 요소란 무엇입니까?
제어되지 않는 구성 요소는 그 반대입니다. 문자 그대로의 의미는 제어되는 구성 요소를 제어하는 구성 요소라고 합니다. 상위 구성 요소는 물론 하위 구성 요소를 제어하며, 값이 하위 구성 요소에 의해 사용되면 하위 구성 요소의 내용이나 메서드 또는 표시 결과가 전달된 값으로 인해 변경됩니다. 상위 구성 요소, 하위 구성 요소는 상위 구성 요소에 의해 제어되는 제어 구성 요소입니다
예를 들어import React,{Component} from 'react';
import ReactDOM from 'react-dom';
class Input extends Component{
constructor(){
super();
this.state = {val:''};
}
handleChange=(event)=>{
let val = event.target.value;
this.setState({val})
}
render(){
return (
<div>
<p>{this.state.val}</p>
//<input type="text" value='123' />
<input type="text" value={this.state.val} onChange={this.handleChange} /> //input就是受控组件 被状态对象的属性控制
</div>
)
}
}
ReactDOM.render(<Input/>,window.app)제어된 구성요소는 실제로 프로그래밍의 모든 측면에 나타납니다. 우리가 단독으로 가져오는 모든 구성요소는 결국 제어된 구성요소일 가능성이 높습니다. 결국 정적 페이지에 대한 수요는 대부분의 경우 여전히 작습니다. 로직은 대화형이어야 합니다
예를 들어, 위의 입력 구성 요소 코드는 텍스트 영역 및 선택 구성 요소와 동일합니다. 특정 렌더링 규칙을 알리고 구성 요소의 내용을 표시하려면 일부 매개 변수(props)를 전달해야 합니다. 예를 들어, 유형 속성은 구성 요소를 제어하는 방법이기도 합니다. 데이터의 양방향 바인딩: 실제로 값이나 속성에 값을 전달하면 구성 요소의 의미가 제어되는 구성 요소로 변경됩니다. 그러나 onChange를 바인딩하면 onChange는 데이터가 변경될 때 구성 요소에 콜백 메서드를 제공합니다. 콜백 메서드에서는 setState를 사용하여 데이터를 변경하므로 다시 렌더링됩니다. 이는 데이터의 양방향 바인딩입니다. 보기, 그리고 보기가 데이터를 주도합니다
요약: 제어되는 컴포넌트와 제어되지 않는 컴포넌트는 현재 컴포넌트가 제어되는지, 다른 콘텐츠와 상호작용이 없는 별도의 컴포넌트인지를 나타내는 개념입니다. 간단히 말하면 완전히 독립된 컴포넌트는 제어되지 않는 컴포넌트로 볼 수 있습니다. 구성 요소가 제어됩니다
[관련 권장 사항: javascript 비디오 튜토리얼, 웹 프론트 엔드]
위 내용은 제어되지 않은 구성 요소에 반응한다는 것은 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
