React js의 "마운팅"이란 무엇입니까?

React js의 "마운팅"이란 무엇입니까?

ReactJs를 배우면서 '마운트'라는 말을 너무 많이 들었어요.그리고 이 용어에는 라이프 사이클 방법과 오류가 있는 것 같습니다.마운트란 정확히 어떤 의미입니까?

::componentDidMount() and componentWillMount()

React의 주요 업무는 화면에 렌더링하려는 구성요소에 맞게 DOM을 수정하는 방법을 알아내는 것입니다.

React는 이를 "마운트"(DOM에 노드를 추가), "마운트 해제"(DOM에서 노드를 삭제) 및 "업데이트"(DOM에 이미 있는 노드를 변경)함으로써 수행합니다.

리액트 노드가 어떻게 DOM 노드로 표시되는지, DOM 트리의 장소와 타이밍은 최상위 API에 의해 관리됩니다.현재 상황을 더 잘 이해하려면 가장 간단한 예를 참조하십시오.

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

ㅇㅇㅇㅇ가 죠?foo걸로로 뭘? ??? fooJavaScript를 사용합니다.

{
  type: FooComponent,
  props: {}
}

현재 페이지 어디에도 없습니다.즉, DOM 요소가 아니며 DOM 트리 어디에도 존재하지 않으며, 리액트 요소 노드 이외에는 문서에 다른 의미 있는 표현이 없습니다.이 React 요소가 렌더링된 경우 화면에 무엇이 표시되어야 하는지 React에 알립니다.아직 "장착"되지 않았습니다.

다음과 같이 호출하여 React에게 DOM 컨테이너에 "장착"하도록 지시할 수 있습니다.

ReactDOM.render(foo, domContainer);

은 리액트에게 「It show 」라고 .foo을 사용하다는 React의 .FooComponent 및 클래스를 하고 호출합니다(class를 호출합니다).render let. a를 a, a a a a a a를 표현한다고 칩시다<div /> 리액트는 리액트를 div【DOM】【DOM】【DOM】【DOM】【DOM】【DOM】【DOM】

React 컴포넌트에 대응하는 인스턴스와 DOM 노드를 생성하여 DOM에 삽입하는 프로세스를 마운트라고 합니다.

보통 전화만 하면 된다는 점에 유의하세요.ReactDOM.render()루트 컴포넌트를 마운트합니다.하위 구성 요소를 수동으로 "장착"할 필요가 없습니다. 가 호출할 setState()및 그 , 「」render메서드는 특정 자녀가 처음으로 렌더링되어야 한다고 말합니다. 반응하다

리액션은 동형/범용 프레임워크입니다.즉, UI 컴포넌트트리의 가상 표현이 존재하며, 이는 브라우저에 출력되는 실제 렌더링과는 별개입니다.매뉴얼에서 다음 항목을 참조하십시오.

DOM과 직접 대화하지 않기 때문에 반응 속도가 매우 빠릅니다.React는 DOM의 고속 메모리내 표현을 유지합니다.

단, 이 메모리 내 표현은 브라우저의 DOM에 직접 연결되어 있지 않으며(Virtual DOM이라고 불리며, 이는 유니버설 애플리케이션 프레임워크의 유감스럽고 혼란스러운 이름이지만), 모든 UI 컴포넌트 계층과 추가 메타데이터를 나타내는 DOM과 같은 데이터 구조일 뿐입니다.Virtual DOM은 구현 세부 사항일 뿐입니다.

"React의 진정한 기반은 단순히 컴포넌트와 요소에 대한 아이디어라고 생각합니다. 즉, 표현하고자 하는 것을 선언적인 방식으로 설명할 수 있는 것입니다.이것들은 이 모든 다른 패키지들이 공유하는 조각들입니다.특정 렌더링 대상에 고유한 React의 부분은 일반적으로 React를 떠올릴 때 생각나는 부분이 아닙니다." - React js 블로그

즉, Respect는 렌더링에 의존하지 않으며, 최종 출력은 상관없습니다.브라우저에는 DOM 트리, XML, 네이티브컴포넌트 또는 JSON을 사용할 수 있습니다.

"리액트 네이티브, 리액트 아트, 리액트 캔버스, 리액트 쓰리 등의 패키지를 보면 리액트의 아름다움과 본질은 브라우저나 DOM과는 무관하다는 것을 알 수 있습니다." - 리액트 js 블로그

이제 React가 어떻게 동작하는지 알게 되었으므로 질문에 대답하는 것은 간단합니다.

마운트란 컴포넌트의 가상 표현을 최종 UI 표현(DOM 또는 네이티브 컴포넌트 등)으로 출력하는 프로세스입니다.

브라우저에서는 React 요소를 DOM 트리의 실제 DOM 요소(예: HTML div 또는 li 요소)로 출력합니다.네이티브 어플리케이션에서는 React 요소를 네이티브컴포넌트로 출력하는 것을 의미합니다.또한 자체 렌더러 및 출력 React 구성 요소를 JSON, XML 또는 XAML로 작성할 수도 있습니다.

따라서 마운트/언마운트 핸들러는 React 어플리케이션에서 매우 중요합니다.컴포넌트는 마운트 시에만 출력/렌더링을 확인할 수 있기 때문입니다.하지만, 그componentDidMount는 실제 Components으로 렌더링할 되며, " " (DOM " 네이티브컴포넌트)"를 사용하여 .으로 렌더링할 때만 호출되며 서버 상의 HTML 문자열로 렌더링할 때는 호출되지 않습니다.renderToString컴포넌트가 브라우저에 도달하여 실행될 때까지 실제로 마운트되지 않기 때문에 이는 타당합니다.

그리고 마운트라는 이름도 안타깝고 혼란스러운 이름이기도 합니다.IMHOcomponentDidRender그리고.componentWillRender훨씬 더 좋은 이름이 될 거야

마운트란 React 내의 컴포넌트(작성된 DOM 노드)가 문서의 일부에 연결되어 있는 것을 말합니다.바로 그거야!

반응 무시 다음 두 가지 기본 기능을 마운트라고 생각할 수 있습니다.

치환자

append Child(자녀 추가)

React가 내부적으로 마운트하기 위해 사용하는 가장 일반적인 함수입니다.

다음 사항을 고려하십시오.

componentWillMount === 마운트 전

그리고:

componentDidMount === 애프터마운트

https://facebook.github.io/react/docs/tutorial.html

여기서 componentDidMount는 컴포넌트가 렌더링될 때 React에 의해 자동으로 호출되는 메서드입니다.

컨셉은 React JS에게 다음과 같이 말하는 것입니다.「댓글 박스나 회전 이미지 등, 브라우저 페이지에 필요한 것을 선택해 주세요.이 작업이 완료되면, 내가 해야 할 기능을 호출합니다.componentDidMount계속 진행할 수 있습니다.

componentWillMount그 반대입니다.컴포넌트가 렌더링되기 직전에 기동합니다.

https://facebook.github.io/react/docs/component-specs.html 도 참조해 주세요.

마지막으로 "mount"라는 용어는 react.js에 고유한 것으로 보입니다.일반적인 javascript 컨셉도 브라우저 컨셉도 아닌 것 같습니다.

마운트란 React 구성요소가 처음 렌더링될 때 처음 페이지를 로드하는 것을 말합니다.마운트 관련 React 문서: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

초기 마운트를 제외하고 React가 렌더링할 때마다 호출되는 componentDidUpdate 함수와 비교할 수 있습니다.

React js의 주요 목표는 재사용 가능한 구성요소를 만드는 것입니다.여기서 컴포넌트는 웹 페이지의 개별 부분입니다.예를 들어 웹페이지에서 헤더는 컴포넌트, 푸터는 컴포넌트, 토스트 알림은 컴포넌트 등입니다."마운트"라는 용어는 이러한 구성 요소가 DOM에 로드 또는 렌더링되었음을 나타냅니다.여기에는 많은 최상위 API와 이에 대응하는 메서드가 있습니다.

간단히 말하면, "마운트 완료"는 컴포넌트가 DOM에 로딩되었음을 의미하며, "마운트 해제"는 컴포넌트가 DOM에서 제거되었음을 의미합니다.

언급URL : https://stackoverflow.com/questions/31556450/what-is-mounting-in-react-js