一、React介绍:

一、前端三大主流框架的区别：

Angular.js:出来较早的前端框架，学习路线比较陡，NG1学习比较麻烦，从NG2开始，也支持TypeScript进行编程

Vue.js: 最火的前端框架，由中国人开发，对我们来说文档比较友好

React.js: 最流行的框架，设计优秀

二、React简介：

起源：React起源于Facebook的内部项目，因该公司对市场上所有的JavaScript MVC框架都不满意，就自己决定写一套，用来架设lnstagram的网站，做出来以后发现好用就在2013年5月开源。

特点：React设计思想独特，属于革命性创新，性能出众，代码逻辑非常简单，越来越多人开始关注使用，认为其可能是将来Web开发主流框架。

三、主要概念：

library(库)： 提供特定的API，可以很方便的从一个库切换到另一个库，代码几乎不会改变。

Framework(框架)：提供一整套解决方案，想切换另外框架是比较困难的

四、组件化方面:

模块化：从代码角度来分析，将一些可复用的代码抽离为单个的模块，便于项目的维护和开发。

组件化：从UI界面角度来分析，将一些可复用的UI元素抽离为单独的组件，便于项目的维护和开发。

组件化的好处：随着项目规模的扩大，自己的组件越来越多，便能很方便的把现有的组件拼接成一个完整的页面。

Vue实现组件化的方式:

通过 .vue文件，来创建对应的组件

· template 结构

· script   行为

· style    样式

React实现组件化的方式:

React中有组件化的概念，但是没有想vue这样的组件模板文件，React中一切都以JS来表现，因此需要有JS、ES6、ES7基础

五、移动APP开发方面:

Vue结合Weex技术，提供迁移到移动端App的开发(Weex,目前只是一个小玩具，没有很大成功案例)

React结合ReactNative,提供无缝衔接到移动App的开发(RN用的最多，也是最火最流行的)

六、React中的几个核心概念:

虚拟DOM(Virtual Document Object Model):

DOM的本质：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API.

虚拟DOM：是React框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套

虚拟DOM的目的：为了实现页面中，DOM元素的高效更新

如何实现实现页面上的按需更新?

1.获取内存中的新旧两颗DOM树进行对比，得到需要按需更新的DOM元素，因为浏览器中并没有直接提供获取DOM树的API，因此我们无法拿到浏览器内存中的DOM树，程序员需要手动模拟DOM树，程序员手动模拟的这俩颗DOM树就是React中的虚拟DOM的概念。

2.DOM树的概念：

 一个网页的呈现过程：

1.浏览器请求服务器获取页面的HTML代码

2.浏览器要先在内存中解析DOM结构，并在浏览器内存中，渲染一颗DOM树

3.浏览器把DOM树呈现在页面上

3.手动模拟DOM元素过程

<divid="mydiv"title="名字"data-index="0">张小凡<p>你好</p></div>vardiv= {
tagName:'div',
attrs:{
id:'mydiv',
title:'名字',
'data-index':'0'    },
childrens:[
'张小凡',
        {
tagNmae:'p',
attrs:{},
childrens:[
'你好'            ]
        }
    ]
}

Diff算法：(different):

tree diff:新旧两颗DOM树，逐层对比的过程，即为Tree Diff;当整颗DOM逐层对比完毕，则所有需要被按需更新的元素必然能够找到。

component diff: 在进行Tree Diff的时候，每一层中，组件级别的对比，叫做Component Diff;如果对比前后，组件的类型相同，则暂时认为此组件不需要更新；如果对比前后，组件的类型不同，则需要移除旧组件，创建新组件，并追加到页面上；

element dif:在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比