【React】React概述

React

快速创建可交互用户界面的 JavaScript 库，Facebook 在 2011 年推出

库和框架两个概念的区别

• library（库）：小而巧，只提供了特定的 API，优点就是“船小好调头”，可以很方便的从一个库切换到另外的库，但是代码机会不会改变
• Framework（框架）：大而全的是框架，框架提供了一整套的解决方案；所以，如果在项目中，想切换到另外的框架，是比较困难的。

三大框架现状

• Angular.js：出现较早的前端框架，学习曲线比较陡，NGI 学起来比较麻烦，NG2~NG5 开始，进行了一系列的改革，也提供了组件化开发的概念；从 NG2 开始，也支持使用 TS（TypeScript）进行开发；
• Vue.js：最火的前端框架，他是国人开发的，对我们来说，文档相对友好一些；
• React.js：最流行的一门框架，因为它的设计很优秀；

React 与 Vue 的对比

组件化方面

• 模块化：是从代码的角度来进行分析的；把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发；
• 组件化：是从UI 界面的角度来进行分析；把一些可复用的 UI 元素抽离为单独的组件，便于项目的维护和开发；
• 组件化的好处：随着项目规模的增大，手里的组件越来越多，很方便就能把现有的组件拼接为一个完整的页面；
• Vue 如何实现组件化：通过.vue 文件来创建对应的组件
  1. template 结构
  2. script 行为
  3. style 样式
• React 如何实现组件化：React 中有组件化的概念，但是并没有像 Vue 这样的模板文件，React 中一切都是以 JS 来实现的；

开发团队方面

• React 是由 FaceBook 前端官方团队进行维护和更新的；因此，React 的维护开发团队，技术实力比较雄厚；
• Vue 1.x 主要是由作者尤大大专门进行维护的，当更新到 2.x 版本后，也有了一个以尤大大为主导的开源小团队，进行相关的开发和维护；

社区方面

• 在社区方面，React 由于诞生的比较早，所以社区比较强大，一些常见的问题的最优解决方案在社区中都是可以很方便就能够找到。
• Vue 的社区相对于 React 来说要小一些，但是一些常见问题的最优解决方案也是可以在社区中找到。

移动 App 开发体验方面

• Vue 结合 Weex，提供了迁移到移动端 App 开发的体验。
• React 结合 ReactNative，也提供了无缝迁移到移动 App 的开发体验。

为什么要学习 React

1. 和 Angular 相比，React 设计很优秀，一切给予 JS 并且实现了组件化开发的思想。
2. 开发团队实力强悍，不必担心断更的情况。
3. 社区强大，很多问题都能找到对应的解决方案。
4. 提供了无缝转到 ReactNative 上的开发体验。

DOM 和虚拟 DOM

• DOM

  • 浏览器中提供的概念：用 JS 对象表示页面上的元素，并提出了操作元素的 API

• 虚拟 DOM

  • 是框架中的概念：手动用 JS 对象来模拟 DOM 元素和嵌套关系
  • 本质：用 JS 对象，来模拟 DOM 元素和嵌套关系
  • 目的：就是为了实现页面元素的高效更新

Diff 算法

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