Home >Web Front-end >Front-end Q&A >What is the difference between react and reactdom

What is the difference between react and reactdom

WBOY
WBOYOriginal
2022-04-27 10:26:212687browse

The difference between react and reactdom is: ReactDom only does operations related to the browser or DOM, such as the "ReactDOM.findDOMNode()" operation; while react is responsible for related operations other than the browser and DOM, and ReactDom is Part of React.

What is the difference between react and reactdom

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

What is the difference between react and reactdom

ReactDom only does operations related to the browser or DOM, such as: ReactDOM.render() and ReactDOM.findDOMNode(). If it is server-side rendering, you can use ReactDOM.renderToString(). React can not only deal with web pages through ReactDOM, but can also be used in server-side SSR, mobile-side ReactNative and desktop-side Electron.

React did not have ReactDOM before v0.14, and all functions were included in React. Starting from v0.14 (2015-10), React was split into React and ReactDOM. Why separate React and ReactDOM? Because of ReactNative. React only contains the core parts common to Web and Mobile. Those responsible for DOM operations are divided into ReactDOM, and those responsible for Mobile are included in ReactNative.

ReactDom is part of React. ReactDOM is the glue between React and DOM. It is generally used to define a single component, or used in conjunction with ReactDOM.findDOMNode(). What's more, the ReactDOM package already allows developers to remove non-essential code added by the React package and move it to a more suitable repository.

e.g:

Web side React code

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
  <div>
  <h1>Hello React</h1>
  </div>
 )
ReactDom.render(<App/>, document.getElementById(&#39;root&#39;));

Mobile side ReactNative code:

import React from &#39;react&#39;;
import {Text, View} from &#39;react-native&#39;;
const WelcomeScreen = () => (
  <View>
  <Text>Hello ReactNative</Text>
  </View>
 );

The same thing is that they all need to import React from 'react'.

And Web applications need to import ReactDOM from 'react-dom';

Mobile applications need to import {Text, View} from 'react-native'

Recommended learning: " react video tutorial

The above is the detailed content of What is the difference between react and reactdom. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn