用JSX创建虚拟DOM并渲染

最新推荐文章于 2025-10-01 17:58:14 发布

原创最新推荐文章于 2025-10-01 17:58:14 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何利用JSX在React中创建虚拟DOM元素，并重点讲述了ReactDOM的render()方法用于将虚拟DOM渲染到实际DOM上的过程。JSX允许开发者在JavaScript中写出类似HTML的结构，而通过Babel转换为React的createElement方法生成虚拟DOM。在最新的React API中，直接使用JSX创建虚拟DOM更加便捷。render()方法接收React元素、挂载点及回调函数作为参数。

JSX

是React创的js的语法扩展可以在js中编写像HTML一样的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/babel">
        const element = <h1>Hello, world!</h1>; 
        console.log(element)
    </script>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>

</html>

比如我想创建一个h1的DOM元素，在jsx下，就可以直接这么写

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

我们打印下element

它本质上就是一个 React 虚拟DOM

那它怎么被创建出来的呢？其实是通过了就是babel语法糖的转义，也即通过下面的方法，创建了一个虚拟DOM

React.createElement('h1', {id: 'recipe', 'data-type': 'title'}, 'Hello World');

在最新的react API中，已经不再使用createElement这个方法了。我们可以直接更快的创建出一个虚拟DOM元素。

如果是换作原生js这么写，直接就报错了

<script>
    const element = <h1>Hello, world!</h1>
    console.log(element)
</script>

原生js下只能定义成字符串的格式，但它仅仅就只是个字符串了

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

渲染

我们创建完了一个虚拟DOM，就可以拿它去渲染了。需要用到

ReactDOM中的render()方法

render()方法，接受三个参数：

1.React元素节点。 2.实际的DOM元素（挂载点） 3.回调函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const element = <h1>Hello, world!</h1>; 
        console.log(element)

        ReactDOM.render(
          element,
          document.getElementById('app')
      );
    </script>
    <script src="https://cdn.bootcss.com/react/16.2.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.2.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</body>

</html>