React-虚拟DOM

1. react

2. react高效的原因：

3. react核心库：

4. 两种创建虚拟DOM方式

5. 虚拟DOM

6. React JSX简化创建虚拟DOM

react官方文档：React 官方中文文档 – 用于构建用户界面的 JavaScript 库

1. react

用于动态构建用户界面的JavaScript库，将数据渲染为HTML视图的开源JS库

2. react高效的原因：

1.react使用虚拟DOM，不总是直接操作页面真实DOM(原生JS直接操作DOM，浏览器hi进行大量的重排重绘)

2. react的DOM Diffing算法，最小化页面重绘(原生JS操作DOM繁琐且效率低)

3.原生JS没有组件化编码方案，代码复用率低

3. react核心库：

react.js：React核心库；react-dom.js：提供操作DOM的react扩展库；bable.min.js：解析JSX语法大妈们转为JS代码的库；prop-type.js

<!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面//参数一：虚拟DOM,参数二：容器ReactDOM.render(VDOM,document.getElementById('test'))</script>

4. 两种创建虚拟DOM方式

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

1.JS创建虚拟DOM

<!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>

2.JSX创建虚拟DOM

<!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 由于要使用JS语法创建虚拟DOM所以就不需要引入babel了 --><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('test'))</script>

5. 虚拟DOM

虚拟DOM会被react转化为真实DOM,编码时只需操作真实DOM即可

简单创建虚拟DOM

const VDOM = React.createElement('xx',{id:'xx'},'xx')

例：

<!-- 准备好一个“容器” --><div id="test"></div><div id="demo"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = (  /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))const TDOM = document.getElementById('demo')console.log('虚拟DOM',VDOM);console.log('真实DOM',TDOM);//由于在浏览器中打印真实DOM时会被展示成html标签并看不到当前真实DOM中的各种属性，所以可以使用debug模式，这样再次运行时在浏览器中将鼠标放到TDOM上就可以看到很多属性，而虚拟DOM中的属性就要少很多了debugger;// console.log(typeof VDOM);// console.log(VDOM instanceof Object);/* 关于虚拟DOM：1.本质是Object类型的对象（一般对象）2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。*/</script>

6. React JSX简化创建虚拟DOM

var ele = <h1> HELLO</lh1>

1.基本语法：

1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析

2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

2.添加bable.js库

1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行

2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

JSX语法规则：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title{background-color: orange;width: 200px;}</style>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/><!-- 这里就会报错，因为html中没有对应的标签 --><good>123</good><!-- 如果首字母是大写的话，React会认为是组件，如果没有这个组件会报Good is not default --><Good></Good></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式，要用style={{key:value}}的形式去写。第一层大括号代表要在里面写js表达式，第二层代                          表里面写的不是函数、数组之类的而是对象5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，                                     则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。*/</script>
</body>
</html>

渲染虚拟DOM元素：

ReactDOM.render(虚拟DOM，真实DOM)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jsx小练习</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >/* 一定注意区分：【js语句(代码)】与【js表达式】1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方,也就是可以拿一个变量去接收的代码下面这些都是表达式：(1). a(2). a+b(3). demo(1)(4). arr.map() map方法的作用是将一个数组进行加工，例如：let arr = [1,3,5,7,9];let res = arr.map((item)=>{return item+1})如果输出res，会发现所有的元素都加1了，2,4,6,8,10(5). function test () {}2.语句(代码)：下面这些都是语句(代码)：(1).if(){}(2).for(){}(3).switch(){case:xxxx}*///模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul><!-- 如果直接这样写可以发现React能够直接遍历数组，但是想要的是将数组的内容都包含在一个li标签 ，还要注意如果data是对象就不能遍历了--><!-- {data} --><!-- 但是在jsx中不能写for循环去遍历，也就是说不能直接写js语法代码 ,这样写代码会直接报错，要注意：大括号里面只能写JS表达式--><!-- for(var i = 0; i < data.length;i++){data[i] = <li>data[i]</li>} -->{data.map((item,index)=>{return <li key={index}>{item}</li>})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

React-虚拟DOM相关推荐

React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲 ...
浅谈React虚拟DOM
为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...
React虚拟DOM Diff算法解析
React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法.这让我们可以无需担心性能问题而"毫无顾忌"的随时"刷新"整个页面,由虚拟DOM来确保只对界面 ...
浏览器性能优化（2）React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...
React 虚拟DOM
虚拟DOM 什么是DOM DOM是用一颗逻辑树来表示一个文档,树的每个分支的终点都是一个节点,可以用特定的方式(编写JS.CSS.HTML)来改变这个树的结构,从而改变文档结构.样式或内容. 什么是虚 ...
react 虚拟 dom
虚拟 dom本质上就是在 js 和真实 dom 之间加了一个缓存,利用 diff 算法,避免了没有必要的 dom 操作,提高性能. 虚拟 dom 并不一定会提高性能: 1 :在首次渲染的时候,因为 ...
React 虚拟Dom 转成真实Dom 实现原理
React 和 React-Dom 是核心模块 React:是核心库,当使用JSX语法时,必须让React 存在当前作用域下 React元素:是通过JSX语法创建的在JS中存在的HTML的标签 JSX ...
React 入门与实战-课时7 虚拟DOM的本质和目的
DOM树的概念: 一个网页呈现的过程: 1.浏览器请求服务器获取页面HTML代码 2.浏览器先在内存中,解析DOM结构,并在浏览器内存中,渲染出一颗DOM树: 3.浏览器把DOM树,呈现到页面上: R ...
React：真正理解虚拟DOM
在mvvm这个框架领域,到现在仍然存在一个及其热门的面试问题:为什么要使用虚拟DOM? 一般的回答如下: 本文将通过另一个视角,给出不同的答案,本文不局限于点对点看待问题本硕本身,而是放在一个足够长的 ...
虚拟dom (virtual dom)(vnode)
1.什么是虚拟 DOM (vdom) 起源虚拟dom最先是由facebook团队提出的,最先运用在react中,之后在vue2.0版本中引入了虚拟DOM的概念是什么虚拟 dom 是相对于浏览器所 ...

React-虚拟DOM

1. react

2. react高效的原因：

3. react核心库：

4. 两种创建虚拟DOM方式

5. 虚拟DOM

6. React JSX简化创建虚拟DOM

React-虚拟DOM相关推荐

最新文章

热门文章