이에 따라 제어되지 않는 구성 요소는 상위 구성 요소에 의해 제어되지 않는 구성 요소입니다. 제어되지 않는 구성 요소는 값을 전달할 필요가 없고 캡슐화할 때 현재 구성 요소의 상위 구성 요소와 교차하지 않는 독립 구성 요소입니다. 구성 요소만 현재 구성 요소는 표시 목적으로만 사용되며 아무런 차이가 없는 경우 제어되지 않는 구성 요소로 캡슐화됩니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
제어되지 않는 구성요소란 무엇입니까?
제어됨과 제어되지 않음이라는 두 단어로 시작합니다. 문자 그대로의 의미는 구성 요소가 제어되지 않으며, 물론 상위 구성 요소에 의해 제어되지 않는다는 것입니다. 제어되지 않는 구성 요소의 특성은 무엇입니까? 즉, 모든 논리는 자체에만 관련되어 있으며 다른 구성 요소와 통신하거나 교차하지 않습니다.
HTML에서는 , , 같은 요소를 형성하고 자체 상태를 유지하며 사용자 입력을 기반으로 업데이트합니다. 하지만 React에서는 이러한 구성 요소가 모두 처리되지 않은 제어되지 않은 구성 요소이므로 실제로 사용하면 이러한 구성 요소가 아무런 처리 없이 입력한 값을 자동으로 업데이트하지 않는다는 것을 알 수 있습니다.
예
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만 사용하여 별도의 파일을 작성하는데, 패키징한 후에 성능이 더 좋아질 수 있습니다. 하지만 프로젝트의 특정 페이지가 정적 페이지인 경우 이를 사용합니까? 제어되지 않는 구성 요소에 의해 표시되는 페이지에는 캡슐화가 없으며 페이지 구성 요소가 단독으로 존재할 경우에만 사용자 정의할 수 있습니다.
제어되지 않는 구성 요소는 값을 전달할 필요가 없고 현재 구성 요소의 상위 구성 요소와 교차하지 않는 독립 구성 요소입니다. 구성 요소를 캡슐화하면 현재 구성 요소가 표시 목적으로만 사용됩니다. 제어되지 않는 구성 요소로 캡슐화되어 있으므로 차이가 없습니다.
지식을 넓히세요:
제어되는 구성요소란 무엇입니까?
이는 제어되지 않는 구성요소의 반대말로, 상위 구성요소에 의해 제어되는 구성요소를 의미합니다.
부모 컴포넌트가 자식 컴포넌트를 제어하는 방식은 물론 자식 컴포넌트가 props 값을 사용하고, 부모 컴포넌트가 전달한 값으로 인해 자식 컴포넌트의 내용이나 메서드, 표시 결과가 변경되는 경우 제어됩니다. , 하위 구성 요소는 상위 구성 요소에 의해 제어되는 제어되는 구성 요소입니다.
예
import React,{Component} from 'react-dom';class 입력 확장 Component{ constructor(){ super() } handlerChange=(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} /> //입력은 상태 객체의 속성에 의해 제어되는 제어 구성 요소입니다. </ div> ) }}ReactDOM.render(<Input/>,window.app)입력을 입력 구성 요소로 간주해서는 안 됩니다. 입력을 우리가 참조하거나 캡슐화하는 구성 요소로 간주해야 합니다. 이 구성 요소가 우리에 의해 전달된 후에는 그것이 우리에 의해 전달된 고정 문자열일지라도 여전히 본질적으로 제어되는 구성 요소는 입력 구성 요소와 마찬가지로 데이터의 양방향 바인딩이 있는지 여부가 아니라 실제로 제어되는지 여부를 확인합니다. 수정될 수 있지만 props는 하드 코딩된 값이지만 이 값은 여전히 입력 구성 요소를 제어합니다.
제어되는 구성 요소에 대한 설명
제어되는 구성요소는 실제로 프로그래밍의 모든 측면에 나타납니다. 우리가 단독으로 가져오는 모든 구성요소는 제어된 구성요소일 가능성이 높습니다. 결국 정적 페이지에 대한 수요는 여전히 적고 우리의 js는 대부분의 경우 논리를 처리합니다. 대화형이어야 합니다.
예를 들어, 위의 입력 구성 요소 코드는 텍스트 영역 및 선택 구성 요소와 동일합니다. 우리는 모두 특정 렌더링 규칙을 알리고 구성 요소의 내용을 표시하기 위해 일부 매개 변수(props)를 전달해야 합니다. 우리가 구성요소를 제어할 수 있도록 말이죠.
데이터의 양방향 바인딩: 실제로 값이나 속성을 값에 전달하면 구성 요소의 의미가 제어되는 구성 요소로 변경되지만 onChange를 바인딩하면 onChange를 통해 구성 요소에 데이터 변경이 제공됩니다. 콜백 메서드에서는 setState를 통해 데이터를 변경하여 다시 렌더링합니다. 이는 데이터가 뷰를 구동하고 뷰가 데이터를 구동하는 것입니다.
요약: 제어되는 컴포넌트와 비제어 컴포넌트는 현재 컴포넌트가 제어되는지, 다른 컨텐츠와 상호작용이 없는 별도의 컴포넌트인지를 나타내는 개념입니다. 간단히 말하면 완전히 독립된 컴포넌트라고 볼 수 있습니다. 구성 요소가 제어됩니다.