React-01课程介绍

React简介

React起源于Facebook的内部项目，该公司积极尝试引入HTML5技术用来架设Instagram网站，开发中发现HTML5的性能下降明显，达不到预期的效果。他们就自己开发了React框架。

ReactJS 官方地址：https://facebook.github.io/react/ （Englist）
https://zh-hans.reactjs.org/ (中文)

GitHub 地址：https://github.com/facebook/react

清楚两个概念

• library(库)：小而巧的库，只提供了特定的API，可以很方便的从一个库切换到另一个库，但是代码几乎不会变。
• Framwwork(框架)：大而全的是框架，矿机按提供了一整套的解决方案，所以如果在项目中间，想切换到另一个框架，比较困难

React特点

• 虚拟DOM：React也是以数据驱动的，每次数据变化React都会扫描整个虚拟DOM，自动计算与上次虚拟DOM的差异变化，然后针对需要变化的部分进行实际的浏览器DOM更新。（性能好，高效）
• 组件化：React可以从功能角度横向划分，将UI分解成不同组件，各组件都独立封装，整个UI是由一个个小组件构成的一个大组件，每个组件只关心自身的逻辑，彼此独立
• 单向数据流：React设计者认为数据双向绑定虽然便捷，但在复杂场景下副作用也是很明显，所以React更倾向于单向的数据流动-从父节点传递到子节点。（使用ReactLink也可以实现双向绑定，但不建议使用）

React 高效原因

• 虚拟DOM，不总是直接操作DOM
• DOM Diff 算法（算什么地方有变化，那些地方没有变化，只更新有变化的地方），最小化页面重绘

前端三大主流框架

三大框架一大抄

• Angular.js：较早的前端框架，（在印度比较多） 2009年（谷歌），学习曲线较陡，NG1学习起来比较麻烦，NG2-NG5开始，进行了一系列的改革，也提供了组件化开发的概念，从NG2开始，也支持使用TS（TypeScript）进行编辑；
• Vue.js： 最火的（关注的人比较多， 中国比较多）一门前端框架，它是中国人开发的，对我们来说，文档要友好一些。
• React.js 最流行（用的人比较多，欧美比较多 ）的一门框架，因为它的设计很优秀；

React 与 Vue 的对比

• 什么是模块化：是从代码的角度来进行分析的，把一些可复用的代码，抽离为单个的模块，便于项目的维护和开发

• 什么是组件化：是从UI界面的角度来进行分析，把一下可复用的UI元素，抽离为单独的组件；便于项目的维护和开发

• 组件的好处：随着项目规模的增大，手里的组件越来越多，很方便就能把现有的组件，拼接为一个完整的页面。

• Vue是如何实现组件化的： 通过.vue文件、Vue.component()、Vue.extends(）来实现组件化。

   - template    结构
   - script      行为
   - style       样式
  

• React是如何实现组件化的：React中有组件化的概念，但是，并没有像vue这样的组件化模板文件，React中，一切都是js来表现的；因此要学习React，js要合格，ES6和ES7（async和await）要会用。

开发团队

• vue是近两年才火起来的，所以，它的社区相互对于react来说，要小一些，可能有一些坑，没人踩过

• react由于诞生的较早，所以社区较强大，一些常见的问题，坑，最优解决方案，文档，博客在社区都是可以很方便找到的。

• React室友FacrBook前端官方团队进行维护和更新的；因此，React的维护开发团队，技术实力比较雄厚

• vue第一版，主要是由作者 尤雨溪专门进行维护的，当vue更新到2.x版本后，也有了一个已尤雨溪为主导的开源小团队，进行相关的开发和维护

社区

移动APP开发体验方面

• Vue，结合Weex这么技术，提供了迁移到移动端App开发的体验，（Weex,目前只是一个小的玩具，并没有很成功的案例）
• React，结合ReactNative,也提供了无缝迁移到移动App的开发体验（RN用的最多，也是最火最流行的）

为什么要学习React

• 和Angular1先比，React设计很优秀，一切基于js并且实现了组件化开发的思想
• 开发团队实力强悍，不必担心断更的情况
• 社区强大，很多问题都能找到对应的解决方案；
• 提供了无缝转到ReactNative上的开发体验，让我们技术能力得到了拓展，增强了我们的核心竞争力
• 很多企业中，前端项目中的技术选型采用的是React.js

React中几个核心的概念

虚拟DOM（Virtual Document Object Model）

• DOM的本质是什么：浏览器中的概念，用js对象表示，页面上的元素，并提供了操作DOM对象的API

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

• 为什么要实现虚拟DOM：为了实现页面中，DOM元素的高效更新

• DOM和虚拟DOM的区别

  • DOM