1 React简介
1.1 React概述
是JavaScript的库，可以简化可视化界面的开发 是基于JSX语法（JavaScript Xml），JSX是React的核心组成部分，它使用xml标记的方式去直接声明界面，和html、js混写,核心是组件，将数据和逻辑进行封装。提高了代码复用率，降低了代码维护的难度。
1.2 React开发环境搭建
1、基本应用（传统应用）：在页面文件中导入React的核心库（.js文件），可以引入官网上的地址，也可以自己下载之后本地引入。
（1）核心库：react.development.js
(2)与DOM相关的库：react-dom.development.js
（3）babel编译器库：将ES6转换成ES5
2、脚手架开发：搭建React项目，根据不同的需求开发组件 （1）create-react-app：属于FacdBook，快速的、不做任何配置的构建React开发环境
npm install -g create-react-app
（2）create-react-app构建的react开发环境是基于webpack+ES6
1.3 React虚拟DOM
React框架的核心优势之一， 就是支持创建虚拟DOM来提高页面性能。那么，什么是虚拟DOM呢？其实， 虚拟DOM这个概念很早就被提出来了， 是相对于实际DOM而言的。
设计人员在设计传统HTML网页的UI时， 都会在页面中定义若干的DOM元素， 这些DOM元素是所谓的实际DOM。通常， 页面中的实际DOM负责承载着外观表现和数据变化，任何外观形式的改变或数据信息的更新都要反馈到UI上， 都是需要通过操作实际DOM来实现的。
于是， 问题也就自然出现了。对于复杂的页面UI而言， 往往会定义大量的实际DOM。频繁地操作大量实际DOM， 往往会带来访问性能的严重下降， 用户体验也会随之变差， 这些都是设计人员所不希望看到的。因此， React框架专门针对这个现象引入了虚拟DOM机制，以避免频繁的DOM操作带来的性能下降问题。
React DOM类似于一种将相关的实际DOM组合在一起的集合， 是React的虚拟DOM对象，内置对象，将其理解为DOM组件应该更为贴切。因此，React框架将ReactDOM称为虚拟DOM。
1.4 React的渲染机制
React框架之所以大受欢迎， 其特有的渲染机制是非常重要的因素之一。既然提到React 渲染机制， 那么就说一说Diff算法， 该算法是支撑React渲染机制的核心技术之一。
Diff算法的核心就是扫描DOM树，通过扫描找到DOM树前后的差异。若DOM树的状态或属性发生改变，React会构建新的DOM树，将新的DOM树和原来的DOM树进行比较，找到树中变化的部分进行修改。好处是避免重复的频繁的操作DOM，提高页面的访问性能。
1.5 React优势
声明式设计：React 采用声明范式，可以轻松描述应用。 高效：React通过对DOM的模拟，最大限度地减少与DOM的交互。 灵活：React可以与已知的库或框架很好地配合。 使用JSX语法：JSX是JavaScript语法的扩展，可以极大地提高JS运行效率。 组件复用：通过React构建组件使得代码易于复用，可在大型项目应用开发中发挥优势。 单向响应的数据流：React实现了单向响应的数据流，减少了重复代码，比传统数据绑定方式更简单。
