React Element Rendering

In React 18, element rendering has some changes compared to previous versions, especially when usingReactDOM.createRootand the new concurrent features. Below is a detailed example and explanation showing how to render elements in React 18.

Example

import React from 'react';
import ReactDOM from 'react-dom/client';

// Create a simple React component
function App() {
    return <h1>Hello, React 18!</h1>;
}

// Get the DOM container with id "example" and create a React root node
const root = ReactDOM.createRoot(document.getElementById("example"));

// Render the React component to the root node in the DOM
root.render(<App />);

React elements are the smallest building blocks of React applications. They describe what you want to see on the screen. React elements are immutable objects; once created, they cannot be changed.

const element = <h1>Hello, world!</h1>;

Unlike browser DOM elements, elements in React are actually plain objects. React DOM ensures that the data content of the browser DOM stays consistent with React elements.

Rendering an Element into the DOM

First, we add aid="example"of<div>:

<div id="example"></div>

All content within this div will be managed by React DOM, so we call it the "root" DOM node.

When developing applications with React, we usually define only one root node. But if you are introducing React into an existing project, you may need to define React root nodes separately in different parts.

To render a React element into the root DOM node, we pass them all toroot.render()method to render it onto the page:

Example

//Create a React element const element =<h1>Hello, world!</h1>; //Get the DOM container and create a root node const root = ReactDOM.createRoot(document.getElementById("example")); //Render the React element to the root node in the DOM root.render(element);

Try it »

root.renderThe method renders the element into the root node created earlier, so the element will be displayed within the DOM element with id "example".

Updating Element Rendering

React elements are immutable. Once an element is created, you cannot change its content or attributes.

The only way to update the UI is to create a new element and pass it into the ReactDOM.render() method:

Let's look at this timer example:

Example

const root = ReactDOM.createRoot(document.getElementById("example")); function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is now{new Date().toLocaleTimeString()}.</h2> </div> ); root.render(element); } setInterval(tick, 1000);

Try it »

The above example calls ReactDOM.render() once per second using the setInterval() method.

We can encapsulate the part to be displayed; the following example uses a function to represent it:

Example

function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is now{props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Try it »

In addition to functions, we can also create an ES6 class of React.Component, which encapsulates the elements to be displayed. Note that in the render() method, you need to usethis.propsto replaceprops：

Example

class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>It is now{this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Try it »

React Only Updates What's Necessary

It is worth noting that React DOM first compares the differences in element content before and after, and during rendering it only updates the parts that have changed.

Other Extensions