1.React概述
- 是用于构建用户界面的JS库，旨在简化可视化界面的开发
- 基于JSX的语法，JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面和HTML,JS混写
- React核心是组件
ReactDOM.render(element,container[,callback])
参数：
element:渲染的源对象（元素或组件）
container:渲染的目标对象
callback:可选，用户定义回调函数
2.React的优点:
- 声明式设计
- 高效：React通过对DOM的模拟，最大限度的减少与DOM的交互
- 灵活：React只是MVC中的View层，自己无法构建大型的应用，需要与已有的框架和库来配合
- 使用JSX语法
- 组件复用：组件是react的核心，一个完整的react应用是由若干个组件搭建起来的，每个组件有自己的数据和方法
- 单项响应的数据流
3.React安装
- 通过script标签引入：
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
解析：
引入了三个库： react.development.min.js 、react-dom.development.min.js 和 babel.min.js；
react.min.js - React 的核心库
react-dom.min.js - 提供与 DOM 相关的功能
babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。
Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。
2.通过npm使用React （脚手架）
create-react-app自动创建的项目是基于webpack+ES6
安装create-react-app: cnpm install -g create-react-app
创建项目： create-react-app my-app
进入项目所在目录： cd my-app
启动项目: npm start
4.React虚拟DOM
实际DOM：设计传统HTML网页的UI时，都会在页面中定义若干DOM元素，负责承载着外观表现和数据变化，任何外观的变化或数据信息的更新都要反馈到UI上，都需要实际DOM来完成。问题：对于复杂的页面UI，往往会定义大量的实际DOM。频繁地操作大量实际DOM，会带来访问性能的严重下降，永辉体液也会随之变差。
React的核心优势之一：支持创建虚拟DOM来提高页面性能
虚拟DOM是在DOM的基础上建立一个抽象层，其实质是一个JavaScript对象，当数据和状态发生了变化，都会被自动高效的同步到虚拟DOM中，最后再将仅变化的部分同步到DOM中。
<div id='example'>
<h1>实际DOM</h1> <!--实际DOM-->
</div>
<!--元素渲染-->
<script type='text/babel'>
ReactDOM.render(
<h1>虚拟DOM</h1>, //虚拟DOM
document.getElementById('example')
)
</script>
5.React的渲染机制
- Diff算法是支撑React渲染机制的和信息技术之一。
- Diff算法的核心是比较找到DOM树前后的差异。
- React渲染机制的基本原理：在DOM树的状态和属性发生改变后，构造出新的虚拟DOM树，然后通过Diff算法与原始的虚拟DOM树进行比较，计算除节点的变化并进行更新操作。
- 该算法的优势就是减少了 对DOM的频繁重复操作，从而提升页面的访问性能
6.JSX语法
一种 JavaScript 的语法扩展。JSX 是在 JavaScript 内部实现的。
优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
可以通过{ } 引入变量，表达式，属性…
<!-- JSX -->
<div id="app"></div>
<script type="text/babel">
var reactDiv=document.getElementById('app');
const userinfo = {
name:'占山',
age:12,
}
const arr = [
<p>姓名：阿酱</p>,
<p>班级：七一班</p>
]
const styles={
css1:{
color:'red',
fontSize:'20px'
},
css2:{
color:'blue',
fontSize:'30px'
}
}
function showUser(user){
return '姓名：'+user.name+'，年龄:'+user.age
}
//增加判断条件
function chooseuserinfo(user){
if(user){
return showUser(user)
}else{
return '用户信息为空'
}
}
const ReactP=(
{
/*JSX注释表达式*/}
<span>
<p>JSX {
1==1?'true':'false'}</p> {
/*算数表达式*/}
<p>{
userinfo.name}</p> {
/*对象属性*/}
<p>{
showUser(userinfo)}</p> {
/*函数表达式*/}
{
/*增强函数表达式：若user为空，则返回‘用户信息为空’，代替if条件*/}
<p>{
chooseuserinfo(userinfo) }</p>
<p>{
chooseuserinfo() }</p>
<div>{
arr }</div> {
/*数组表达式*/}
<p style={
styles.css1 }>改变样式1</p> {
/*样式表达式*/}
<p style={
styles.css2 }>改变样式2</p>
</span>
)
ReactDOM.render(ReactP,reactDiv)
</script>
注意：引入script文件时的type属性：<script type="text/babel">