React学习之旅三：元素渲染、React.createElement()、ReactDOM.render()

最新推荐文章于 2025-06-06 09:12:33 发布

小猴子豆芽菜

最新推荐文章于 2025-06-06 09:12:33 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： React元素渲染 React.createElement() ReactDOM.render()

本文链接：https://blog.youkuaiyun.com/XU906722/article/details/81150279

本文详细介绍了React中如何将元素渲染到DOM中，包括使用React.createElement()创建虚拟DOM，ReactDOM.render()进行渲染，以及如何通过定时器动态更新元素内容。通过封装成函数和类组件的方式展示了React元素的动态管理，为后续学习React的JSX奠定了基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

将元素渲染到DOM中

通过React渲染简单元素

用react实现该html内容：<h1>这是我的第一个小实验</h1>

第一步：创建html文件，引入相应的react和react-dom包，并定义一个容器用于存放虚拟DOM；

<div id="element"></div>

第二步：创建虚拟DOM元素;

const element = <h1>这是我的第一个小实验</h1>

还可以这样写：const element = React.createElement('h1', null, '这是我的第一个小实验');

第三步：将虚拟DOM元素渲染到页面上

ReactDom.render(element, document.getElementById('example'));

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">

 const element =<h1>这是我的第一个小实