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

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

---

ReactJS를 배우는 동안 "마운트"라는 용어가 너무 많이 들립니다. 그리고이 용어와 관련하여 수명주기 방법과 오류가있는 것 같습니다. 장착한다는 것은 React가 정확히 무슨 뜻입니까?

예 : 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가 divDOM 노드를 생성 하고 DOM 컨테이너에 삽입 한다고 가정 해 봅시다 .

React 컴포넌트에 해당하는 인스턴스 및 DOM 노드를 작성하고이를 DOM에 삽입하는 프로세스를 마운트라고합니다.

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

---

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

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

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

"React의 진정한 토대는 단순히 컴포넌트와 요소에 대한 아이디어라고 생각합니다. 선언적으로 렌더링하려는 것을 설명 할 수있는 것입니다. 이들은 서로 다른 모든 패키지가 공유하는 부분입니다. React의 특정 렌더링과 관련된 부분 목표는 일반적으로 우리가 반응을 생각할 때 생각하는 것이 아닙니다. " -JS 블로그에 반응

결론적으로 React is Rendering agnostic 이라는 것이 최종 결과물에 신경 쓰지 않는다는 것을 의미합니다. 브라우저의 DOM 트리 일 수 있으며 XML, 기본 구성 요소 또는 JSON 일 수 있습니다.

"반응 네이티브, 반응 아트, 반응 캔버스, 반응 3과 같은 패키지를 살펴보면 React의 아름다움과 본질이 브라우저 나 DOM과 관련이 없다는 것이 분명해졌습니다." -JS 블로그에 반응

이제 React의 작동 방식을 알았으므로 질문에 쉽게 대답 할 수 있습니다. :)

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

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

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

그렇습니다. 마운트 는 불행한 / 혼란스러운 이름입니다. 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

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

---

마운팅이란 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).

You can contrast this with componentDidUpdate function, which is called everytime that React renders (except for the initial mount).

---

The main goal of React js is to create reusable components. Here, components are the individual parts of a webpage. For example, in a webpage the header is a component, the footer is a component, a toast notification is a component and etc. The term "mount" tells us that these components are loaded or rendered in the DOM. These are many top-level APIs and methods dealing with this.

To make it simple, mounted means the component has been loaded to the DOM and unmounted means the components has been removed from the DOM.

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