React概念

React是用于动态构建用户界面的 JavaScript 库，由Facebook开源。之所以能被称为框架，是因为基于这个库，形成了一个庞大的生态，解决了一系列的成型的问题。 主要特点：

• 1.声明式编码（相对于命令式编码，提高了开发效率）
• 2.组件化编码
• 3.React Native 编写原生应用
• 4.高效（使用虚拟dom和diffing算法，减少dom反复更新和浏览器的重绘重排）
  

虚拟DOM

虚拟DOM是一个JS的对象，由React.createElement('xx',{id:'xx'},'xx')创建，真实的DOM是由Document.createElement('xx',{id:'xx'},'xx')创建， 主要目的是方便React去操作真实DOM，并且虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是给react用的,无需那么多的属性。 本质上都是对象，真实DOM包含了节点的ONXXX等事件，虚拟的DOM并不需要，所以比较轻。

JSX的使用

JSX是JavaScript XML的缩写，是React中定义的一种类似于XML的标记型语言，用于简化创建虚拟DOM，本质是React.createElement(component, props, ...children)方法的语法糖； 使用方法：

 1.创建虚拟DOM
    let ID = 'RecaT'
    let Data = 'testData'
    const VDOM = (
        <div>
            <h2 id={ID.toLowerCase()} className="demo"> 
                <span>{Data.toUpperCase()}</span>
            </h2>
            <h2 style={{backgroundColor:'skyblue',color:'red'}}>hello,test</h2>
            <input type="text"/>
        </div>
    )
    
    *demo为样式标签的demo样式；

2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM,document.getElementById('xxx'))

jsx的语法规则：

• 1.创建虚拟DOM时，不要用引号，直接使用标签，为了样式美观，可以加一个括号
• 2.标签中的js表达式，需要用{}包裹。（表达式需要有返回值）
• 3.根标签必须只有一个
• 4.标签必须闭合
• *5.样式的类名，不要用class，必须用className
• 6.内联的样式要用 style={{}}形式去写
• 7.标签可以随意的编写：
  • (1).若标签首字母是【小写】的，则react会尝试将当前的jsx标签对应成一个html标签，若对应成了，直接渲染，展示；若无法对应，直接报错！
  • (2).若标签首字母是【大写】的，则react会查找Xxx组件的定义的位置，若找见了，直接渲染Xxx组件；若未找见，报错(Xxx is not defined)

注： 使用JSX语法的时候，要在Script标签上加上type="text/babel", 声明需要babel来处理