리액트돔은 무슨 일을 하나요?

"react-dom"의 기능은 가상 DOM을 문서로 렌더링하여 실제 DOM으로 바꾸는 것입니다. "react-dom"은 React 프로젝트를 개발할 때 사용해야 하는 툴킷입니다. 애플리케이션에서 사용할 수 있는 메소드. 최상위 수준에서 사용되며 React 모델 외부의 DOM에 대한 특수 작업을 위한 인터페이스로도 사용할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

react-dom의 역할은 무엇인가요

react를 사용하여 웹 페이지를 개발할 때 두 개의 패키지가 다운로드됩니다. 하나는 React이고 다른 하나는 React-dom입니다. -dom은 DOM 조작과 관련된 부분을 제거합니다.

react의 핵심 아이디어는 가상 DOM입니다. React에는 가상 DOM을 생성하는 함수인 React.createElement와 Component 클래스가 포함되어 있습니다. 컴포넌트를 직접 캡슐화할 때 라이프사이클 기능 등을 사용하려면 Component 클래스를 상속해야 합니다. React-dom 패키지의 핵심 기능은 이러한 가상 DOM을 문서로 렌더링하고 이를 실제 DOM으로 바꾸는 것입니다.

react-dom은 React 프로젝트를 개발할 때 사용해야 하는 툴킷으로, 주로 웹 측 렌더링에 사용되는 DOM용 플랫폼 구현입니다. React-dom 패키지는 애플리케이션의 최상위 수준에서 사용할 수 있거나 React 모델 외부의 DOM에 대한 특수 작업을 위한 인터페이스로 사용할 수 있는 DOM 관련 메서드를 제공합니다.

react-dom에는 주로 findDOMNode, unmountComponentAtNode 및 render의 세 가지 API가 포함되어 있습니다. 다음은 트리거링 순서대로 소개됩니다.

1.render

render는 React에서 렌더링한 가상 DOM을 브라우저 DOM에 렌더링하는 데 사용됩니다. 일반적으로 최상위 구성 요소에 사용됩니다. 이 메소드는 요소를 컨테이너에 마운트하고 요소의 인스턴스(즉, refs 참조)를 반환합니다. 상태 비저장 구성 요소인 경우 렌더링은 null을 반환합니다. 구성요소가 로드되면 콜백이 호출됩니다. 구문은 다음과 같습니다.

render(ReactElement element,DOMElement container,[function callback])

예:

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
// Provider react-redux的内容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById(&#39;root&#39;))

2, findDOMNode

findDOMNode는 DOM 노드에서 작동하기 위해 실제 DOM 요소를 얻는 데 사용됩니다.

이전에 먼저 알아야 할 사항: React에서는 가상 DOM이 실제로 HTML에 추가되고 컴포넌트가 마운트된 후(render()) 실제 DOM으로 변환되므로 두 가지 메소드인 componentDidMount 및 componentDidUpdate Get을 사용할 수 있습니다. 예는 다음과 같습니다.

import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM

참고: 복잡한 작업의 경우 사용할 수 있는 요소 DOM API가 많이 있습니다. 그러나 DOM 작업은 성능에 큰 영향을 미치므로 DOM 작업을 최소화해야 합니다.

3. unmountComponentAtNode

unmountComponentAtNode는 마운트 해제 작업을 수행하는 데 사용되며 componentWillUnmount 전에 실행됩니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 리액트돔은 무슨 일을 하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!