리액트돔이 뭐야?

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

React를 사용하여 웹 페이지를 개발하면 필연적으로 두 개의 패키지를 다운로드하게 됩니다. 하나는 React이고 다른 하나는 React-dom입니다. 여기서 React는 React의 핵심 코드입니다.

react-dom 패키지는 애플리케이션의 최상위 수준에서 사용할 수 있는 DOM(DOM 관련) 메서드를 제공합니다. 필요한 경우 React 모델 외부의 DOM에 대한 특수 작업을 위한 인터페이스로 React 모델 외부에서 이러한 메서드를 사용할 수 있습니다. 그러나 일반적으로 대부분의 구성 요소에서는 이 모듈을 사용할 필요가 없습니다.

npm 및 ES6를 사용하는 경우 import ReactDOM from 'react-dom'进行引入。如果你使用 npm 和 ES5，你可以用 var ReactDOM = require('react-dom')를 사용하여 가져올 수 있습니다.

react-dom의 다섯 가지 인터페이스

1. render()

ReactDOM.render(element, container[, callback])

제공된 컨테이너의 React 요소를 렌더링하고 구성 요소에 대한 참조를 반환합니다(또는 상태 비저장 구성 요소의 경우 null을 반환합니다).

React 요소가 이전에 컨테이너에 렌더링된 경우 업데이트 작업이 수행되고 최신 React 요소를 매핑하는 데 필요한 경우에만 DOM이 변경됩니다.

선택적 콜백 함수가 제공되는 경우 구성 요소가 렌더링되거나 업데이트된 후에 콜백이 실행됩니다.

2.hydrate()

ReactDOM.render(element, container[, callback])
// 渲染一个 React 元素到由 container 提供的 DOM 中，并且返回组件的一个 引用(reference) （或者对于 无状态组件 返回 null ）

3.unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)
// 从 DOM 中移除已装载的 React 组件，并清除其事件处理程序和 state 。 如果在容器中没有挂载组件，调用此函数什么也不做。 如果组件被卸载，则返回 true ，如果没有要卸载的组件，则返回 false

4.findDOMNode()는 권장되지 않습니다

ReactDOM.findDOMNode(component)
// 如果组件已经被装载到 DOM 中，这将返回相应的原生浏览器 DOM 元素。在大多数情况下，你可以绑定一个 ref 到 DOM 节点上，从而避免使用findDOMNode。

5.

ReactDOM.createPortal(child, container)
// 创建一个 插槽(portal) 。 插槽提供了一种方法，可以将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

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