Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "what is the role of react-dom", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what is the role of react-dom" article.

The role of "react-dom" is to render a virtual DOM into a document into an actual DOM; "react-dom" is a toolkit that react development projects need to use, provides DOM-specific methods that can be used at the top level of the application, and can also be used as an interface for special manipulation of DOM outside the React model.

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

What is the function of react-dom?

When you develop a web page using react, you download two packages, one is react and the other is react-dom, where the react package is the core code of react, and react-dom is the part that React strips out that involves DOM operations.

The core idea of react is that virtual DOM,react contains the function react.createElement that generates virtual DOM and the Component class. When we encapsulate components ourselves, we need to inherit the Component class in order to use lifecycle functions, and so on. The core function of the react-dom package is to render these virtual DOM into documents to become actual DOM.

React-dom is a toolkit to be used in react development projects. It is a platform implementation for dom and is 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 manipulation of DOM outside the React model.

React-dom mainly consists of three API:findDOMNode, unmountComponentAtNode and render. The following is described in the order of triggers.

1 、 render

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

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

For example:

The content of 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 (, document.getElementById ('root'))

2 、 findDOMNode

FindDOMNode is used to get the real DOM element so that you can manipulate the DOM node.

Before that, it's important to know that in React, the virtual DOM is actually added to the HTML and transformed into the real DOM after the component is mounted (render ()), so we can get it in the componentDidMount and componentDidUpdate methods. Examples are as follows:

Import {findDOMNode} from 'react-dom'; {this.node = node}} > / / obtain the instance of Example component const dom = findDOMNode (this.node) using ref; / / obtain the real DOM corresponding to the instance through findDOMNode

Note: there are many elements DOM API available when it comes to complex operations, but DOM operations can have a significant impact on performance, so DOM operations should be minimized.

3 、 unmountComponentAtNode

UnmountComponentAtNode is used to perform uninstall operations, before componentWillUnmount.

The above is the content of this article on "what is the role of react-dom". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.