Virtual DOM本质上就是在JS和DOM之间做了一个缓存
可以类比CPU和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢, 我们就在它们JS和DOM之间加个缓存.CPU(JS)只操作内存(Virtual DOM,最后的时候再 把变更写入硬盘（DOM）
React提供了一些API来创建一种特别的一般js对象
//创建的就是一个简单的虚拟DOM对象 var element = React.createElement('h1', {id:'myTitle'}, 'hello');虚拟DOM对象最终都会被React转换为真实的DOM
我们编码时基本只需要操作react的虚拟DOM相关数据,react会转换为真实DOM变化而更新界面
创建虚拟DOM的2种方式
JSX方式
// jsx方式创建虚拟dom元素对象 const vDOM2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>还有一种是纯JS,一般不使用:
// 纯JS方式 const msg = 'I like you'; const myId = 'atguigu'; const vDOM1 = React.createElement('h2',{id:myId},msg);渲染虚拟DOM(元素)
语法: ReactDOM.render(virtualDOM,containerDOM)
作用: 将虚拟DOM元素渲染到真实容器DOM中显示
参数说明:
参数一: 纯js或jsx创建的虚拟DOM对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
// 渲染到真实的页面中 ReactDOM.render(vDOM1,document.getElementById('example1')); ReactDOM.render(vDOM2,document.getElementById('example2'));使用示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>02_JSX_DEMO</title> </head> <body> <ul> <li>A</li> <li>B</li> <li>C</li> </ul> <hr> <div></div> <div></div> <script src=""></script> <script src=""></script> <script src=""></script> <script type="text/babel"> /* 功能: 动态展示列表数据 */ /* 技术点: 1). 使用JSX创建虚拟DOM 2). React能自动遍历显示数组中所有的元素 3). array.map()的使用 */ //数据的数组 var names = ['Tom2', 'Jack2', 'Bob2']; //数据的数组——>标签数组 var lis = []; names.forEach((item,index)=>lis.push(<li key={index}>{item}</li>)); //创建虚拟的DOM const ul=<ul>{lis}</ul>; // 将虚拟的Dom渲染到页面中的某个DOM元素中 ReactDOM.render(ul,document.getElementById('example1')) const ul2 = <ul>{names.map((name,index)=><li key={index}>{name}</li>)}</ul> ReactDOM.render(ul2, document.getElementById('example2')) </script> </body> </html> React的组件模块
什么是模块: 向外提供特定功能的js程序, 一般就是一个js文件
为什么要用模块: js代码越多越复杂了
使用模块的优势: 简化js的编写, 阅读, 提高运行效率
模块化: 当应用的js都以模块来编写的, 这个应用就是一个模块化的应用
组件
什么是组件: 用来实现特定功能效果的代码集合(html/css/js)
为什么要用组件: 单个界面的功能更复杂
使用组件的优势: 复用, 简化项目编码, 提高运行效率
组件化: 当应用是以多组件的方式实现功能, 这样应用就是一个组件化的应用
自定义组件:
1. 定义组件
2. 渲染组件标签
//语法规则 ReactDOM.render(<MyComponent/>, document.getElementById('example'));注意
返回的组件类必须首字母大写
虚拟DOM元素必须只有一个根元素
虚拟DOM元素必须有结束标签