一、React简介

1、是一个JavaScript的库,目的是简化用户界面的开发。

2、是基于JSX(JavaScript Xml)语法,可以和html、js混合书写。

3、核心是组件,可以实现用户界面的模块化开发,代码的复用率高、可维护性好。

4、是Facebook公司开发,2013年发布。

二、React的开发过程

1、导入js文件

<script src="../js/react.development.js"></script> <!-- React的核心库 -->
<script src="../js/react-dom.development.js"></script><!-- React与DOM有关的库 -->
<script src="../js/babel.min.js"></script><!-- 用于将ES6转换成ES5 -->

2、创建DOM

3、进行DOM的渲染

ReactDOM.render(虚拟的DOM,实际的DOM)

三、React的虚拟DOM

1、实际的DOM

??????传统的HTML的UI设计,承载了数据的呈现和更新,浏览器在呈现DOM之前,要构建一棵DOM树,若该DOM树中的某一点发生了变化,就必须重新构建;对于复杂的DOM,若频繁的重建就会导致页面的性能下降。

2、虚拟的DOM

??????先构建一棵虚拟的DOM树,若树中的某一点发生了变化,只进行局部的更新,然后将虚拟的DOM渲染到实际的DOM中.

四、JSX语法

1、JSX其实就是JavaScript XML的缩写，直译过来就是基于JavaScript的XML。

2、通过React JSX方式定义的虚拟DOM，最终也会转换为通过createElement()方法实现虚拟DOM。

五、React的渲染原理

1、React渲染机制的基本原理就是：在DOM Tree的状态和属性发生改变后，构造出新的虚拟DOM Tree

2、通过Diff算法与原始的虚拟DOM Tree进行比较，计算出变化的节点并进行更新操作。该算法的优势就是减少了对DOM的频繁重复操作，从而提升页面的访问性能。

六、JSX语法详解

1、JSX的一般语法形式是

const element=(
		<tag-level-1>
		  <tag-level-2>
		  </tag-level-2>
        </tag-level-1>
    );

(1) element中必须有且只能有一个根标签。

(2)允许<></>作为根标签。

2、JSX的算术表达式

???????将表达式放在 '{}'中

3、JSX的条件表达式

???????使用条件运算符

4、JSX嵌入表达式

???????先定义变量,使用’{}'来引用变量

5、JSX的对象表达式

???????可以引用对象,支持’对象名.属性’格式

6、JSX的函数表达式

???????在’{}'中调用函数

7、JSX的数组表达式

举例：

<div id='app'></div>//真实的DOM
<script type='text/babel'>
const reactDiv=document.querySelector('#app');//获取真实DOM
var name='jm'//定义变量
let obj={//定义对象
    name:'jm',
    age:20,
   address:'xian'
}
function showInfo(user){//声明函数
    return '姓名'+user.name
}
let arr=[//定义数组

    <p key='1'>学校:西安</p>,
    <p key='2'>专业</p>,
    <p key='3'>学制</p>
  
]
const reactSpan=(//定义虚拟DOM
    <span>
    <p>{3+8}</p>//算术表达式的应用
    <p>{3>5?'西安邮电':'西北政法'}</p>//条件表达式的运用
    <p>姓名：{name}</p>//变量引用
    <p>{obj.name},{obj.age}</p>//引用对象
    <p> {showInfo(obj)}</p>//函数的引用
    <div>{arr}</div>//数组的引用
</span>
    )
    ReactDOM.render(reactSpan,reactDiv)//渲染DOM
</script>

8、JSX的样式表达式

例：

    <div id='root'></div>
    <script type="text/babel">
    const styles={//定义样式
     css1:{
        fontSize:20,
        fontStyle:'bold',
        color:'red'
    },
      css2:{
        fontSize:30,
        fontStyle:'normal',
        color:'blue'
    },
      css3:{
        fontSize:12,
        fontStyle:'italic',
        color:'green'
    }
}
   
    const root=document.querySelector('#root')//获取真实DOM
    const reactSpan=(
        <span>
            
            <p style={styles.css1}>西安邮电大学</p>//应用样式
            <p style={styles.css2}>西安邮电大学</p>
            <p style={styles.css3}>西安邮电大学</p>
    
            </span>
    )
    ReactDOM.render(reactSpan,root)//渲染DOM
    </script>