1.React简介
- React起源于Facebook的内部项目，因为该公司对市场上所有JavaScript MVC框架都不满意，就决定自己开发一套，用来设计Instagram网站，在2013年开源。
- 由于React的she设计思想及其独特， 属于革命性创新，性能出众，代码逻辑却很简单，所以越来越多的人开始使用，认为它可能是将来web开发的主流工具。
- 清楚两个概念
library（库）：小而巧，只提供特定的API ； 优点：可以方便的从一个库切换到另外的库，但是代码几乎不会改变
framework（框架）：大而全；提供一整套的解决方案，项目中再切换比较困难
2.前端三大主流框架
- Angular.js：出来较早的前端框架。学习曲线比较陡，NG1学起来比较麻烦，NG2~NG5开始进行进行了一系列的改革，也提供了组件化开发的概念；从NG2开始，也支持使用TS(TypeScript）进行编程。
- Vue.js：最火的一门前端框架，中国人开发，文档友好
- React.js:最流行的一门前端框架，设计优秀
3.React与Vue的对比
组件化方面
1.什么是模块化：代码角度分析，把一些可复用的代码抽离为单个模块；以便于项目的维护和开发；
2.什么是组件化：UI界面角度分析，把一些可复用的UI元素抽离为单个组件；
3.组件化的好处：随着项目规模增大，组件越来越多，很方便就能把现有的组件拼接出来
4.Vue是如何实现组件化的：通过.vue文件来创建对应的组件
- template结构
- script行为
- style样式
5.React是如何实现组件化的：React中有组件化的概念，但是没有像vue这样的组件模板文件，一切都是以JS来表现的
开发团队方面
- React是由Facebook前端官方团队进行维护和更新的；因此，技术实力比较雄厚；
- Vue：主要是由开发者尤雨溪为主引导的开源团队维护的
社区方面
- React由于诞生比较早，所以社区比较强大，一些常见的问题在社区中很方便能找到。
- Vue近两年火起来，所有社区相对来说小一些
移动App开发体验方面
- vue，结合Weex这门技术，提供了迁移到移动端App开发的体验（weex，目前只是一个小的玩具，并且由很成功的大案例）
- React，结合ReactNative也提供了无缝迁移到移动App的开发体验（RN用的最多，也是最火最流行的）
4.为什么要学习React
- 1.与Angular 1相比 React设计优先，一切基于JS，并且实现了组件化开发的思想
- 2.开发团队实力强悍
- 3.社区强大，很多问题都能找到解决方an案
- 4.提供了无缝转到ReactNative上的开发体验
-
5.React中几个核心的概念
虚拟DOM（virtual document objject model)
- DOM的本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API
- 什么是React中的虚拟DOM：框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套
- 为什么要实现虚拟DOM:为了实现页面中，DOM元素的高效更新
- DOM和虚拟DOM的区别：
DOM:浏览器中提供的概念；用JS对象表示页面上的元素，并提供了操作元素的API
虚拟DOM：是框架中的概念，是开发框架的程序员，手动用JS对象来模拟DOM元素和嵌套关系；
本质：用JS对象，来模拟DOM元素和嵌套关系
目的：为了实现页面元素的高效更新
- DOM树的概念：
一个网页呈现的过程：
- 浏览器请求服务器获取页面HTML代码
- 浏览器要先在内存中解析DOM结构，bing并在浏览器内存中渲染出一颗DOM树
- 浏览器把DOM树呈现在页面上
Diff算法
- tree diff：新旧两棵DOM树，逐层对比的过程，就是Tree Diff；当整棵DOM逐层对比完毕，则所有需要被按需更新的元素，必然能够找到。
- component diff：在进行tree diff时，每一层中组件级别的对比，叫做component diff；
-
如果对比前后，组件的类型相同，则暂时认为组件不需要被更新
如果对比前后，组件类型不同，则需要移除旧组件，创建新组件，并追加到页面上
- element diff：在进行组件对比时，如果两个组件类型相同，则需要进行元素级别的对比。