你需要知道的-React基础篇
我们知道，学习知识跟盖大house一样，都要打地基，坚实的基础，要不然后面不知道出什么问题呢
对于这种技术性的扩展性的东西不能只知其然不知其所以然～～～啦啦啦啦
基础篇走起
通过官网了解到，React是一个js库，曾经一直用的jquery是一个函数库，哈哈～那么react有哪些特点呢
React特点：1）Declarative(声明式编码)
2）Component-Based(组件化编码)
3）Learn Once，write anywhere（支持客户端与服务端渲染）
4）高效（具体的体现在a.虚拟Dom b.Dom diff算法）
5）单向数据流（这个后面解释）
上面提到的虚拟Dom是指一个对象，可以批量修改，减少页面重绘的次数，Diff算法是指可以通过某种方式计算出需要重绘更新变化的部分，这样就可以减少更新区域，减少更新次数，哈哈哈，完美，bingo～～～
接下来我们实打实的敲打一下，瞅瞅它是一个怎样的虚拟法，瞅瞅是怎么实现Hello World的，//dog
首先创建项目，我们可以自己先引入react所需要的库
那就先解释一下吧，react.js 是react的核心库，必不可少的。react.dom.js 提供操作Dom的react扩展库。babel.min.js 是用来解析JSX语法代码转为纯js语法代码的库，就是经常说的将ES6转为ES5
这些从哪里来的呢，当然可以从这里，当当当https://www.bootcdn.cn/ BootCDN,在这里直接搜索react 就可以看到啦！
引入之后，我们首先创建一个空元素,实现我们的hello world
<div id='test'></div>
然后就然后了
1.创建虚拟Dom 元素对象
const objDom = <h1>Hello World</h1> //注意哦，这里没有引号，不是字符串哦，接下来就知道为啥了
2.将虚拟DOM渲染到页面中真实DOM 容器中
<script type="text/babel"> //使用babel解析jsx代码
ReactDom.render(objDom,document.getElementById('test'))
</script>
注意到没，我的script标签的类型，不是text/javascript而是text/babel,这里就可以解释上面的啦，不是字符串，没有引号。。。。如果变成text/javascript会直接报错，这就是babel的实现，将jsx代码转为js代码
当然在开发的过程中千万别忘记装一个react的开发者工具，在谷歌浏览器的扩展插件中安装就行，React Developer Tools
就在上面一直提到jsx ,那么它是什么呢
比如现在要实现一个效果
<div id="test1"><h2 id="design">这是出现的效果</h2></div>
<div id="test2"><h3 id="sign2">这是第二个效果</h3></div>
首先呢也是先创建虚拟DOM，然后渲染到真实DOM中
1) <script type="text/javascript">
const msg = ''这是出现的效果"
const msgId = "design"
1.创建虚拟DOM
const el = React.createElement('h2',{id:msgId},msg)
2.渲染虚拟Dom
React.render(el,document.getElementById('test1'))
</script>
2)<script type="text/babel">
const msg = ''这是出现的效果"
const msgId = "design"
1.创建虚拟DOM
const el = <h3 id={msgId}>{msg}</h3>
2.渲染虚拟Dom
React.render(el,document.getElementById('test1'))
可见上面两种写法都能实现我们想要的效果，只不过一种是jsx的原始写法，第二种是通过babel方式，最终还是转换为jsx代码的。只不过第二种更简单
虚拟DOM
1）React 提供了一些API来创建一个js对象如：const el = React.createElement('h2',{id:msgId},msg),这就是创建的一个简单的虚拟DOM对象
2）虚拟DOM对象最终都会被React转换为真是的DOM
3）在编码时只需要操作react的虚拟的DOM相关数据，react会转换为真是的dom变化而更新界面
真实DOM与虚拟DOM的区别是啥
真实dom是一个非常重的对象，内容多，可以通过审查元素看到，更新dom会更新界面
虚拟dom是一个轻对象，更新时不会更新界面
jsx是javascript XML，标签名任意命名，如组件标签
jsx是react 定义的一种类似于XML的js扩展语法：XML+JS
作用：用来创建react虚拟dom元素对象
如：const ele = <h1>JSX</h1>
注意：它不是字符串，也不是html/xml,它最终产生的就是一个js对象
标签名任意：html标签或者其他的
标签属性任意：html属性或者其他的
基本的语法规则：遇到以< 开头的代码，以标签语法解析，遇到以{ 开头的代码，以js语法解析
以上只是为了测试语法，实际项目是需要搭建上次跟大家说的环境的，啦啦啦啦～
下次再见咯～～～～
