最简单的React示例

React 利用 React-DOM 库，将 React 实例插入到 HTML 中运行，并且一般 React 代码采用 JSX 格式来简化原本的 JS 格式。

以下是一个最简单的 React 示例。

import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));

在React 17以及之前的版本中，React应用是依靠一个ReactDOM.render()函数来渲染的，但是在React 18中，React应用的渲染已经被改成了一个ReactDOM.createRoot()函数的调用。许多React 18中新引入的功能都需要使用ReactDOM.createRoot()来渲染输出应用的根节点。上面的最小React应用改用React 18编写是下面这个样子的。

import ReactDOM from 'react-dom';

ReactDOM.createRoot(document.getElementById('app')).render(<h1>Hello world</h1>);

方法ReactDOM.createRoot()会将一个HTML元素声明为React应用的根节点，在这个根节点上调用render()方法即可以将React应用渲染到根节点上。

Tip

如果直接阅读React的更新日志，那么还会发现一个名为hydrateRoot()的方法，这个方法的功用于createRoot()是基本一致的，只是hydrateRoot()方法所创建的应用根节点主要用于由ReactDOMServer渲染的动态页面上。如果React应用项目是前后端分离的形式，那么直接使用createRoot()创建应用根节点即可。

Warning

如果在项目中使用的是React 18版本，但是依旧使用了旧版的ReactDOM.render()方法来渲染输出React应用，那么你将在浏览器的控制台中收到一条警告，通知你这个render()方法已经过时了，并且此时Ract应用将运行在React 17模式下。