本教程操作环境:Windows10系统、react16.4.0版、Dell G3电脑。
react为什么要引入虚拟dom
React框架的核心之一就是虚拟DOM,相对于实际DOM而言,虚拟DOM可以更好地提升页面性能。
为什么要使用虚拟DOM?
通常设计人员在设计传统HTML网页的UI时, 都会在页面中定义若干的DOM元素, 这些DOM元素是所谓的实际DOM。实际DOM负责承载着外观表现和数据变化,任何外观形式的改变或数据信息的更新都要反馈到UI上, 都是需要通过操作实际DOM来实现的。但对于复杂的页面UI而言, 往往会定义大量的实际DOM。频繁地操作大量实际DOM, 往往会带来访问性能的严重下降, 用户体验也会随之变差, 因此, React框架专门针对这个现象引入了虚拟DOM机制,以避免频繁的DOM操作带来的性能下降问题。
React DOM类似于一种将相关的实际DOM组合在一起的集合, 是有区别于传统概念上的DOM元素的,如果将其理解为DOM组件应该更为贴切,所以React框架将ReactDOM称为虚拟DOM。
创建虚拟DOM
纯js方式 React.createElement(‘h1′,{},title)
JSX方式 <h1 id=’myTitle’>{title}</h1>
下面感受一下实际DOM和虚拟DOM书写的区别
实际DOM
<div id="example"></div> <script> // 实际DOM // 定位到div const divDOM = document.getElementById('example'); // 创建DOM控件 const jsSpan = document.createElement('span'); const jsH3 = document.createElement('h3'); jsH3.innerHTML = '实际DOM'; const jsP = document.createElement('p'); jsP.innerHTML = 'Hello World!'; jsSpan.appendChild(jsH3); jsSpan.appendChild(jsP); divDOM.appendChild(jsSpan); </script>
虚拟DOM
在使用React框架之前需要提前导入React的js库
<!-- react的核心库 --> <script src="../React/react.development.js"></script> <!-- react的DOM库 --> <script src="../React/react-dom.development.js"></script> <!-- 编译器 将ES6转换为ES5 --> <script src="../React/babel.min.js"></script>
<div id="example"></div> <script type="text/babel">// type必须有 // 虚拟DOM const divReact = document.getElementById('example'); const reactH3 = React.createElement('h3',{},'虚拟DOM'); const reactP = React.createElement('p',{},'Hello World!'); const reactSpan = React.createElement('span',{},reactH3,reactP); ReactDOM.render(reactSpan,divReact);// 将reactSpan插入divReact </script>
推荐学习:《react视频教程》