（一）React系列文章：虚拟DOM的创建与解释，注意的相关规则

（一）React系列文章：虚拟DOM的创建与解释，注意的相关规则

前言：

react的前期是处于学习状态，不是直接从项目上手的，所以前期的是基础知识会比较多，解释比较多，而且是从引入的方式进行使用React的，更能直观的了解到有些的原理使用，如果你看到这个文章并且想要学习的时候可以去这个 https://pan.baidu.com/s/12NCJRszdd9iQe65ARvDjJw 提取码：97wg() 进行文件下载和案例查看。
后期所有文件在没有标注的情况下都是使用引入的方式

简介：

是一个将数据渲染为HTML的视图的开源库

特点：

1.采用组件化模式，声明式编码，提高开发效率及组件的复用率（命令式）
2.在React Native中可以使用React语法进行移动端开发
3.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互 （虚拟DOM不是真实使用的 是放在你的内存里面是进行渲染使用的）

虚拟DOM

虚拟DOM有一个进行与之前的DOM进行比较 去使用之前存在的DOM 然后去渲染多出来的

创建虚拟DOM：（自我理解，其实虚拟DOM在创建使用的时候只是react的一个概念，只是React的运转的一个理念，就像是双向数据绑定的，你给查看原理的时候知道是原型链的数据触发，但是在使用的时候只是一个语法的书写而已，所以学习的时候尽量能够去理解设计初衷，设计哲学，不然后期使用的时候拓展性就不会很高了）

举例子：

创建一个虚拟DOM 并且渲染上去，使用的

创建的时候使用的语法是jsx 不是js ，就算是在使用原生引入的是时候都是在
<script type="text/babel" ></script> 

1.这样使用JSX的才是react的相关语法 
		//1.创建虚拟DOM
		const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
			<h1 id="title">
				<span>Hello,React</span>
			</h1>
		)
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))

2.也可以使用js创建虚拟DOM <script type="text/javascript" ></script> 
		//1.创建虚拟DOM
		const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
		
区别：使用jsx可以直接写结构但是使用js创建结构就是很麻烦

渲染虚拟DOM：

ReactDOM.render(虚拟DOM，选择的节点) 是替换操作 不是重复追加。（预计就是组件开发 进行全部的渲染加载）

在解析的时候说明就是 jsx的语法最后在执行的时会按照js创建虚拟DOM的方式进行执行，可以理解为就是jsx是js创建的语法糖

关于虚拟DOM是什么：

可以借助debugger进行查看真实DOM的属性
1.console输出虚拟DOM就是一个Object
2.虚拟DOM比较轻 ，真实DOM比较重， 因为虚拟DOM是React在用 ，不需要那么多的属性
3.虚拟DOM最终会被react转化为真实DOM， 呈现在页面上

书写虚拟DOM的注意事项:

1.定义虚拟DOM时候 ，不要用引号
2.解析js的表达式时，要用 { } 进行解析
3.解析CSS的样式的时候，样式的类名指定用className。
4.内联样式的写法 Such as: 多个单词使用小驼峰 fontSize
5.只能有一个根标签 和vue一样
6.标签必须闭合
7.关于标签首字母，
（1）如果小写字母开头，则将标签改为HTML的标签。若没有同名的HTML标签元素 则报错
（2）若大写字母开头，react就是渲染相应的组件，要是没有就报错

表达式和代码的区别：

1.a（只写一个变量）
2.a+b
3.demo（1）
4.arr.map() (用于加工数组)
5. function test () {}
2. 语句（代码）(控制代码走向的)
举例子：
1.if () {}
2.for() {}
3.switch () { case:xxx}