What does react-dom do?

The function of "react-dom" is to render the virtual DOM into the document and turn it into the actual DOM; "react-dom" is a toolkit that needs to be used when developing react projects. It provides DOM-specific methods, which can Used at the top level of the application, it can also be used as an interface for special DOM manipulation outside of the React model.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the role of react-dom

When using react to develop a web page, two packages will be downloaded, one is react and the other is react-dom, where the react package is the core code of react. React-dom is the part related to DOM operations stripped out of React.

The core idea of ​​react is virtual DOM. React includes the function react.createElement that generates virtual DOM, and the Component class. When we encapsulate components ourselves, we need to inherit the Component class to use life cycle functions, etc. The core function of the react-dom package is to render these virtual DOMs into documents and turn them into actual DOMs.

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.

react-dom mainly contains three APIs: findDOMNode, unmountComponentAtNode and render. The following is introduced in order of triggering.

1. render

render is used to render the virtual DOM rendered by React to the browser DOM, and is generally used in top-level components. This method mounts the element into the container and returns the instance of element (that is, the refs reference). If it is a stateless component, render will return null. When the component is loaded, the callback will be called. The syntax is:

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

For example:

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 is used to obtain the real DOM element in order to operate on the DOM node .

Before this, you must first know: In React, the virtual DOM is actually added to HTML and converted into a real DOM after the component is mounted (render()), so we can use componentDidMount and componentDidUpdate. Obtained in two ways. An example is as follows:

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

Note: When it comes to complex operations, there are many element DOM APIs available. However, DOM operations will have a great impact on performance, so DOM operations should be minimized.

3. unmountComponentAtNode

unmountComponentAtNode is used to perform unmount operations and is executed before componentWillUnmount.

Recommended learning: "react video tutorial"

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