01. React-基础概念

两个概念

• library（库）：小而巧，只提供特定的API；jQuery，库之间的切换比较方便，代码几乎不会改变
• Farmework（框架）：大而全，提供了一整套的解决方案，vue，项目框架不易切换

前端三大主流框架

• Angular.js
• Vue.js
• React,js

React与Vue的对比

组件化方面

• 什么是模块化：从代码角度；将可复用的功能代码抽离为单个模块；便于项目的维护和开发；例如：node.js
• 什么是组件化：从UI角度；将可复用的UI元素，抽离为单个组件；便于项目开发和维护；例如：react和vue；组件包含三个要素：结构（HTML）、行为（JavaScript）、样式（css）
• Vue是如何实现组件化的：通过.vue文件，来创建对应组件；该文件包含三个部分：
  • template 结构
  • script 行为
  • style 样式
• React如何实现组件化：一切都以js来表现的，语法遵循ES6、ES7(async、await)标准

开发团队

• Vue.js：第一版，主要由 尤雨溪 专门进行维护；2.x 后，由 尤雨溪为主的开源团队
• React.js：由Facebook前端官方团队进行维护和更新

社区

• Vue最近两年才流行起来，社区相对较小，有一些坑没人踩过
• React诞生较早，社区强大，常见问题、坑、最优解决方案、文档、博客在社区里面比较丰富

移动App开发体验

• Vue，结合Weex这门技术，提供了迁移到移动端App开发的体验。（Weex，比较初级，没有很成功的大案例）
• React，结合ReactNative，提供了无缝迁移到移动APP的开发体验（RN用的对多）。

为什么要学习React

• 和Angular1相比，React设计很优秀，一切基于JS并且实现了组件化的思想
• 开发团队实例强悍，不必担心断更的情况
• 社区强大，很多问题都可以找到对应的解决方案
• 提供了无缝转到ReactNative上的开发体验
• 很多企业中，前端项目的技术选型采用React.js

React中的核心概念

虚拟DOM（Virtual Document Objec Model）

• DOM的本质是什么：浏览器中的概念，用JS对象来表示页面上的元素，并提供了操作DOM对象的API
• 什么事React中的虚拟DOM：是框架中的概念，是程序员用JS对象来模拟页面上的DOM和DOM嵌套
• 为什么要实现虚拟DOM：为了实现页面中，DOM元素的高效更新
• DOM和虚拟DOM的区别：
  在做table表格排序功能时，如果只是第一行和第二行交换，其他行无序改变。
  浏览器未提供DOM树的API，因为无法拿到浏览器内存中的DOM树，排序时会将整个table重新渲染；
  使用虚拟DOM，通过diff算法，可以按需渲染，只重新渲染改变的行。

diff算法

• tree diff：新旧两颗DOM树，逐层进行对比的过程，就是tree diff，当整颗DOM对比完毕，则所有需要被按需更新的元素必然可以找到
• component diff：在进行tree diff，每一层中组件级别的对比，叫做Component Diff；
  • 如果对比前后，组件的类型相同，则暂时认为此组件不需要被更新；
  • 如果对比前后，组件类型不同，则需要移除旧组件，常见新组件，并追加到页面上；
• element diff：在进行组件对比的时候，如果两个组件类型相同，则需要进行元素级别的对比，这就是Element Diff