React js에서“마운팅”이란 무엇입니까?

ReactJS를 배우는 동안 "마운트"라는 용어를 너무 많이 들었습니다. 그리고이 용어에 대한 수명주기 방법과 오류가있는 것 같습니다. 마운트가 정확히 무엇을 의미합니까?

예 : componentDidMount() and componentWillMount()

React의 주요 임무는 구성 요소가 화면에 렌더링하려는 내용과 일치하도록 DOM을 수정하는 방법을 알아내는 것입니다.

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

React 노드가 DOM 노드로 표시되는 방식과 DOM 트리에서 나타나는 위치와시기는 최상위 API에 의해 관리됩니다 . 무슨 일이 일어나고 있는지에 대한 더 나은 아이디어를 얻으려면 가능한 가장 간단한 예를 살펴보십시오.

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

그래서 무엇이며 foo그것으로 무엇을 할 수 있습니까? foo은 (는) 대략 다음과 같은 일반 JavaScript 객체입니다 (단순화 됨).

{
  type: FooComponent,
  props: {}
}

현재 페이지의 어디에도 없습니다. 즉, DOM 요소가 아니고, DOM 트리의 어디에도 존재하지 않으며, React 요소 노드를 제외하고는 문서에서 다른 의미있는 표현이 없습니다. 그냥 어떤 반작용 알 필요가 화면에있을 경우 이 요소가 렌더링됩니다 반응한다. 아직 "마운트"되지 않았습니다.

다음을 호출하여 React에 DOM 컨테이너에 "마운트"하도록 지시 할 수 있습니다.

ReactDOM.render(foo, domContainer);

이것은 React에게 foo페이지 에 표시 할 시간임을 알려줍니다 . React는 FooComponent클래스 의 인스턴스를 만들고 render메서드를 호출합니다 . 를 렌더링한다고 가정 해 보겠습니다 <div />.이 경우 React는 div이를위한 DOM 노드를 생성하고 이를 DOM 컨테이너에 삽입합니다.

React 컴포넌트에 해당하는 인스턴스와 DOM 노드를 생성하고이를 DOM에 삽입하는 과정을 마운팅이라고합니다.

일반적으로 ReactDOM.render()루트 구성 요소를 마운트하기 위해서만 호출 합니다. 하위 구성 요소를 수동으로 "마운트"할 필요가 없습니다. 부모 컴포넌트가를 호출 setState()하고 그 render메서드가 특정 자식을 처음으로 렌더링해야한다고 말할 때마다 React는이 자식을 부모에 자동으로 "마운트"합니다.

React는 동형 / 유니버설 프레임 워크입니다. 즉, UI 구성 요소 트리의 가상 표현이 있으며 브라우저에서 출력하는 실제 렌더링과는 별개입니다. 문서에서 :

React는 DOM과 직접 대화하지 않기 때문에 너무 빠릅니다. React는 DOM의 빠른 메모리 내 표현을 유지합니다.

그러나 메모리 내 표현은 브라우저의 DOM에 직접 연결되어 있지 않으며 ( 유니버설 앱 프레임 워크에 대해 불행하고 혼란스러운 이름 인 Virtual DOM이라고하더라도 ) DOM과 유사한 데이터 일뿐입니다. 모든 UI 구성 요소 계층 및 추가 메타 데이터를 나타내는 구조입니다. 가상 DOM은 구현 세부 사항 일뿐입니다.

"우리는 React의 진정한 토대가 단순히 컴포넌트와 요소에 대한 아이디어라고 생각합니다. 렌더링하려는 것을 선언적 방식으로 설명 할 수있는 것입니다. 이들은 이러한 모든 다른 패키지에서 공유되는 부분입니다. 특정 렌더링에 특화된 React의 부분 타겟은 보통 우리가 React를 생각할 때 생각하는 것이 아닙니다. " -React js 블로그

따라서 결론은 React가 Rendering agnostic 이라는 것입니다. 이는 최종 출력이 무엇인지 신경 쓰지 않는다는 것을 의미합니다. 브라우저의 DOM 트리 일 수 있으며 XML, 네이티브 구성 요소 또는 JSON 일 수 있습니다.

"react-native, react-art, react-canvas, react-three와 같은 패키지를 살펴보면 React의 아름다움과 본질이 브라우저 나 DOM과 관련이 없다는 것이 분명해졌습니다." -React js 블로그

이제 React가 어떻게 작동하는지 알았으므로 질문에 쉽게 대답 할 수 있습니다. :)

마운팅 은 구성 요소의 가상 표현을 최종 UI 표현 (예 : DOM 또는 기본 구성 요소)으로 출력하는 프로세스입니다.

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

따라서 마운트 / 마운트 해제 핸들러는 React 애플리케이션에 중요합니다. 컴포넌트가 마운트 될 때만 출력 / 렌더링되는지 확인할 수 있기 때문 입니다. 그러나 componentDidMount핸들러는 실제 UI 표현 (DOM 또는 기본 구성 요소)으로 렌더링 할 때만 호출되지만을 사용하여 서버에서 HTML 문자열로 렌더링하는 경우에는 호출되지 않습니다 renderToString. 이는 구성 요소가 실제로 마운트 될 때까지 마운트되지 않기 때문입니다. 브라우저에서 실행됩니다.

그리고 예, Mounting 은 당신이 저에게 묻는다면 불행하고 혼란스러운 이름입니다. IMHO componentDidRender와 componentWillRender훨씬 더 나은 이름이 될 것입니다.

마운트는 문서의 일부에 첨부되는 React (생성 된 DOM 노드)의 구성 요소를 의미합니다. 그게 다야!

React를 무시하면 다음 두 가지 기본 함수를 마운트로 생각할 수 있습니다.

replaceChild

appendChild

React가 내부적으로 마운트하는 데 사용하는 가장 일반적인 함수는 무엇일까요?

에 대해 생각하다:

componentWillMount === 마운트 전

과:

componentDidMount === 마운트 후

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

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

컨셉은 여러분이 ReactJS에게 "이것,이 주석 상자 나 회전하는 이미지 또는 내가 원하는 것이 무엇이든 브라우저 페이지에서 원하는대로 가져 가서 실제로 브라우저 페이지에 올려 놓으십시오. 완료되면 전화하십시오. componentDidMount계속할 수 있도록 결속 된 내 기능입니다 . "

componentWillMount그 반대입니다. 구성 요소가 렌더링되기 전에 즉시 실행됩니다.

여기 https://facebook.github.io/react/docs/component-specs.html 참조

마지막으로 "마운트"용어는 react.js에 고유 한 것으로 보입니다. 나는 그것이 일반적인 자바 스크립트 개념이나 일반적인 브라우저 개념이라고 생각하지 않습니다.

Mounting은 React 구성 요소가 처음 렌더링 될 때 초기 페이지로드를 의미합니다. Mounting에 대한 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와 메소드입니다.

간단히 말해서, mount는 컴포넌트가 DOM에로드되었음을 의미하고 unmounted는 컴포넌트가 DOM에서 제거되었음을 의미합니다.