react虚拟DOM

最新推荐文章于 2024-07-21 12:55:28 发布

bliss小宝

最新推荐文章于 2024-07-21 12:55:28 发布

阅读量196

点赞数 1

分类专栏： react 前端文章标签： react js

本文链接：https://blog.csdn.net/weixin_50001396/article/details/116044743

版权

前端同时被 2 个专栏收录

225 篇文章 8 订阅

订阅专栏

react

51 篇文章 0 订阅

订阅专栏

react 的引入

在这里插入图片描述

引入文件时蓝色框内的文件要在红色框内的文件之前引入

<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx 转换为 js -->
<script src="../js/babel.min.js"></script>

为 #text 增加内容部分

<body>
    <div id='test'>
    </div>
</body>
<script type="text/babel">
  // 1.创建虚拟dom // 此处不要写引号
    const VDOM = <h1>hello-react</h1>
     // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM，容器) 
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

虚拟DOM创建的两种方式

js创建虚拟DOM

<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 此处一定要写babel -->
<script type="text/javascript">
  // 1.创建虚拟dom // 此处不要写引号
    // const VDOM = React.createElement(标签名,标签属性，标签内容); 
    const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,react'))
     // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM，容器) 
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

jsx创建虚拟DOM

<!-- 引入react核心库 -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于将jsx 转换为 js -->
<script src="../js/babel.min.js"></script>
<!-- 此处一定要写babel -->
<script type="text/babel">
  // 1.创建虚拟dom // 此处不要写引号
    const VDOM =(
      <h1 id='title'>
        <span>hello-react</span>  
      </h1>
    ) 
     // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM，容器) 
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>

虚拟DOM和真实DOM的区别

<script type="text/babel">
  // 1.创建虚拟dom // 此处不要写引号
    const VDOM =(
      <h1 id='title'>
        <span>hello-react</span>  
      </h1>
    ) 
     // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM，容器) 
    ReactDOM.render(VDOM,document.getElementById('test'))
    const TDOM = document.getElementById('test');
    console.log('虚拟DOM',VDOM);
    console.log('真实DOM',TDOM);
    debugger;
    console.log(typeof VDOM);
    console.log(VDOM instanceof Object);
    /* 
      关于虚拟DOM：
        1.本质是Object类型的对象（一般对象）
        2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部再用，无需真实DOM上那么多属性
        3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
    */
</script>