提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

React虚拟dom的两种创建方式

React 方式 创建 两种 虚拟 dom
2023-06-13 09:13:03 时间

1，使用jsx创建虚拟DOM

案例代码

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

<body>

<!--准备好一个容器 -->

<div id="test"></div>

<!-- 加载 React。引入react核心库-->

<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 引入react-dom,用于支持react操作dom-->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!--引入babel，用于jsx转为js-->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">/*此处一定要写babel，不写默认js*/

//1，创建虚拟dom

const VDOM=<h1 id="title"><span>Hello,React</span></h1> //此处不要加引号，因为不是字符串

//2，渲染虚拟dom到页面

ReactDOM.render(VDOM,document.getElementById('test'))

</script>

</body>

2，用js创建虚拟DOM

案例代码

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

<body>

<!--准备好一个容器-->

<div id="test"></div>

<!-- 加载 React。引入react核心库-->

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 引入react-dom,用于支持react操作dom-->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<script type="text/javascript">

//1，创建虚拟dom

//标签，属性，内容

const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},"hello react"))

//2，渲染虚拟dom到页面

ReactDOM.render(VDOM,document.getElementById('test'))

</script>

</body>

3，虚拟DOM与真实DOM

虚拟DOM：

  1. 本质是object类型的对象（一般对象）
  2. 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是react内部在用，无需真实DOM上那么多的属性
  3. 虚拟DOM最终会被react转化为真实DOM，呈现在页面上。

PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL

<body>

<!--准备好一个容器-->

<div id="test"></div>

<div id="demo"></div>

<!-- 加载 React。引入react核心库-->

<!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 引入react-dom,用于支持react操作dom-->

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!--引入babel，用于jsx转为js-->

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">/*此处一定要写babel，不写默认js*/

//1，创建虚拟dom

const VDOM=<h1 id="title"><span>Hello,React</span></h1> //此处不要加引号，因为不是字符串

//2，渲染虚拟dom到页面

ReactDOM.render(VDOM,document.getElementById('test'))

console.log('虚拟dom',VDOM);//对象

console.log(typeof VDOM);//object

console.log(VDOM instanceof Object);//true

const TDOM = document.getElementById('demo')

console.log('真实dom',TDOM);//标签

debugger;

console.log(typeof TDOM);//object

console.log(TDOM instanceof Object);//true

/*

* 关于虚拟dom

* 1，本质是object类型的对象（一般对象）

* 2，虚拟dom比较“轻”，真实dom比较“重”，因为虚拟dom是react内部在用，无需真实dom上那么多的属性

* 3，虚拟dom最终会被react转化为真实dom，呈现在页面上。

* */

</script>

</body>

相关文章