React基础教程(四) - 博客详情

虚拟DOM是js对象，是对真实DOM的描述。

1.虚拟DOM

React 组件的挂载阶段：根据 JSX 构建虚拟 DOM, ReactDOM.render 实现虚拟 DOM 到真实 DOM 的映射，React 组件的挂载阶段：页面变化，体现在虚拟 DOM 上，然后变化前后的虚拟 DOM 对比，将变化的部分作用于真实的 DOM。

虚拟DOM在react的工作流中起什么作用呢？主要体现在以下两点：

初始化时，执行render，构建虚拟DOM，ReactDOM.render将虚拟DOM渲染为真实DOM。
更新时，执行 render，构建虚拟 DOM，通过diff算法得出更新前后的差异，ReactDOM.render 将计算得到的差异的虚拟DOM渲染为真实DOM。

2.两种创建虚拟DOM方式

使用JS创建虚拟DOM和JSX创建虚拟DOM。

1)JSX创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>


</head>
<body>
<div id="app">
</div>
<script type="text/babel">
    //1.创建虚拟DOM
    const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('app'))

</script>
</body>
</html>

2)JS创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.0.0-rc.1-next-629036a9c-20220224/umd/react.production.min.js"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.0.0-rc.1-next-629036a9c-20220224/umd/react-dom.production.min.js"></script>
    <!-- 引入babel，用于将jsx转为js -->
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/7.0.0-alpha.20/babel.min.js"></script>


</head>
<body>
<div id="app">
</div>
<script type="text/javascript" >
    //1.创建虚拟DOM，想要创建多层标签的话就需要在每层的React.createElement中第三个参数创建，非常麻烦
    const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
    //2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('app'))
</script>

</body>
</html>

总结: 推荐使用JSX的方式写虚拟DOM。因为JSX 更像是 React.createElement 的一种语法糖，允许我们使用熟悉的类 HTML 标签语法来创建虚拟 DOM。在降低学习成本的同时，也提升了研发效率与研发体验。