【React学习】—虚拟DOM两种创建方式(二)

这篇具有很好参考价值的文章主要介绍了【React学习】—虚拟DOM两种创建方式(二)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【React学习】—虚拟DOM两种创建方式(二)

一、Hello React案例

【React学习】—虚拟DOM两种创建方式(二),【React】,react.js,学习,javascript

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>hello react</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入Bable 用于将jsx转化为js -->
    <script src="../js/babel.min.js"></script>

    <!-- 此处一定要写Bable -->
    <script type="text/babel">
      //创建虚拟DOM
      const VDOM = <h1>Hello,React</h1>;
      //渲染虚拟DOM
      ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
  </body>
</html>

【React学习】—虚拟DOM两种创建方式(二),【React】,react.js,学习,javascript

二、虚拟DOM的两种创建方式

使用jsx创建虚拟DOM

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用jsx创建</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入Bable 用于将jsx转化为js -->
    <script src="../js/babel.min.js"></script>

    <!-- 此处一定要写Bable -->
    <script type="text/babel">
      //创建虚拟DOM
      const VDOM = <h1 id="title">Hello,React</h1>;
      //渲染虚拟DOM
      ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
  </body>
</html>

使用js创建虚拟DOM
【React学习】—虚拟DOM两种创建方式(二),【React】,react.js,学习,javascript文章来源地址https://www.toymoban.com/news/detail-626553.html

  <script type="text/javascript">
      //创建虚拟DOM
     const VDOM=React.createElement('h1',{id:'title'},'Hello React')
      //渲染虚拟DOM
      ReactDOM.render(VDOM,document.getElementById('test'))
    </script>

三、虚拟DOM和真实DOM的对比

  • 本质是Object类型的对象(一般对象)
  • 虚拟DOM比较轻,真实DOM比较重,因为虚拟DOM是React内部在用
  • 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

到了这里,关于【React学习】—虚拟DOM两种创建方式(二)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React下载文件的两种方式

    React下载文件的两种方式 - 代码先锋网 不知道有用没用看着挺整齐  没试过

    2024年02月12日
    浏览(40)
  • JavaScript 框架比较:Angular、React、Vue.js

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。这些首字母相同的选项各自代表不同的技术加工具组合。为了在这些技术栈中做出明智选择,让我们先从核心组件聊起,再对各自前端框架(React、Angular 和 Vue)进行简化比

    2024年01月20日
    浏览(59)
  • React创建组件的三种方式及其区别是什么?

    在React中,创建组件的三种主要方式是函数式组件、类组件和使用React Hooks的函数式组件。以下是对每种方式的详细解释以及它们之间的区别: 1、函数式组件: 函数式组件是使用纯粹的JavaScript函数来定义的。它接收一个props对象作为参数,并返回一个用于描述组件UI的React元

    2024年02月11日
    浏览(43)
  • JavaScript框架 Angular、React、Vue.js 的全栈解决方案比较

    在 Web 开发领域,JavaScript 提供大量技术栈可供选择。其中最典型的三套组合,分别是 MERN、MEAN 和 MEVN。前端框架(React、Angular 和 Vue)进行简化比较。 MERN 技术栈包含四大具体组件: MongoDB:一款强大的 NoSQL 数据库,以灵活的 JSON 格式存储数据。 Express.js:一套极简但强大的

    2024年02月03日
    浏览(58)
  • 2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

    🎉欢迎来到Java学习路线专栏~探索2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较 ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:Java学习路线 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 🍹文章作者技术和水

    2024年02月11日
    浏览(49)
  • React原理 - React Virtual DOM 原理

    目录 扩展学习资料  Virtual DOM 是什么【虚拟dom】 React渲染 Virtual DOM VS 原生DOM【vDom是否比原生Dom更高效】 Virtual DOM数据结构 Virtaual DOM Diff【虚拟dom前后比对,更新不同dom的算法】 源码解读 react源码组织方式: React Stack Reconciler【react 栈 协调】 react v15.6.2 源码 练习 名称 链接

    2024年02月11日
    浏览(46)
  • React-路由 react-router-dom

    前端路由的功能:让用户从一个页面跳转到另一个页面。 前端路由是一套映射规则 ,在 React 中, 是 URL 路径与组件的对应关系 。 使用 React 路由简单来说就是配置 路径与组件(配对) 。 路由的本质: 一个路径 path 对应唯一的一个组件 component 当我们访问一个 path 自动把 p

    2024年02月02日
    浏览(42)
  • Node.js npm V8 React Express的运行配合关系:构建JavaScript应用的基石

    目录 Node.js 和 V8 引擎 Node.js 和 npm LTS(Long Term Support) React Node.js的作用 Express Node.js 和 V8 引擎 Node.js 使用 Google 的 V8 JavaScript 引擎 来执行 JavaScript 代码。V8 是一个高性能的 JavaScript 和 WebAssembly 引擎,用于在 Google Chrome 浏览器和 Node.js 中运行 JavaScript。 V8 引擎的更新 通常包括

    2024年03月12日
    浏览(64)
  • React 路由react-router-dom详解

    前面我们先了解一下 路由是什么? 路由分类有哪些?内置API有哪些 ? 可能有点枯燥,不喜欢看的直接跳过 ! 单页Web应用(single page web application,SPA)。 整个应用只有一个完整的页面。 点击页面中的链接不会刷新页面,只会做页面的局部更新。 数据都需要通过ajax请求获取

    2023年04月11日
    浏览(41)
  • 前端react入门day03-react获取dom与组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 受控表单绑定  React中获取DOM 组件通信 父传子  父传子-基础实现 父传子-props说明 父传子 - 特殊的prop children 子传父  使用状态提升实现兄弟组件通信 使用Context机制跨

    2024年02月01日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包