what is react-dom

react-dom is a toolkit that needs to be used when developing react projects. It is a platform implementation for dom, mainly used for rendering on the web side. The react-dom package provides DOM-specific methods that can be used at the top level of the application or as an interface for special operations on the DOM outside of the React model.

If we use react to develop web pages, we will inevitably download two packages, one is react and the other is react-dom, where react is the core code of react.

The react-dom package provides DOM (DOM-specific) methods that can be used at the top level of the application. The react-dom package provides DOM-specific methods that can be used at the top level of your application. If there is If necessary, you can use these methods outside the React model as interfaces for special operations on the DOM outside the React model. However, in general, most components do not need to use this module.

If you use npm and ES6, you can use import ReactDOM from 'react-dom' to import. If you use npm and ES5, you can import it with var ReactDOM = require('react-dom').

Five interfaces of react-dom

1. render()

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

Render one in the provided container React element and returns a reference to the component (or null for stateless components).

If the React element has been rendered in the container before, this will perform an update operation on it and only change the DOM if necessary to reflect the latest React element.

If an optional callback function is provided, the callback will be executed after the component is rendered or updated.

2.hydrate()

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

3.unmountComponentAtNode()

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

4.findDOMNode() It is not recommended to use

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

5. createPortal() This is very useful, ahhh!

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

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of what is react-dom. For more information, please follow other related articles on the PHP Chinese website!