React学习总结

1. React框架介绍

1.1 什么是 React

React是一个简单的javascript UI库，用于构建高效、快速的用户界面。它是一个轻量级库，所以很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操做DOM。它遵循从高阶组件到低阶组件的单向数据流。

1.2 专一视图层

如今应用的日趋复杂要求更增强大的开发工具
React并非完整的MVC/MVVM框架，它专一于提供清晰、简洁的view层解决方案。
而又与模板引擎不一样，React不只专一于解决view层的问题，又是一个包括View和Controller的库。
对于复杂的应用，能够根据应用场景选择业务层框架，并根据须要搭配Flux、Redux、GraphQL/Relay来使用。
React框架没有提供许多概念和复杂的API，它以Minimal API Interface为目标，只提供组件化相关的少许API。同时为了保持灵活性，它也没有自创一套规则，而是尽量的让开发者使用原生JavaScript进行开发。

1.3 Virtual Dom

• 传统dom更新：真实页面对应一个DOM树，每次须要更新页面都要手动操做DOM进行更新
• 虚拟dom：React把真实DOM树转换成JavaScript对象树，也就是Virtual Dom，每次更新，就让虚拟DOM树作一次标记，到最后事件循环机制结束以后，全部节点都改变再进行一次DOM的渲染。

前端开发中，DOM操做十分昂贵。性能消耗最大的就是DOM操做，并且这部分代码会让总体项目的代码变得难以维护。而虚拟DOM的出现很好的缓解了这个问题。
注：
虚拟DOM指经过JS脚本编译生成的，经过append添加节点到body中的DOM元素；
真实dom是HTML里面写入的一些结构在JS脚本里面经过document获得的元素都是真实DOM。

1.4 JSX语法

React为方便view层组件化，承载了构建HTML结构化页面的职责。从这点看来，React与其余JavaScript模板语言有着殊途同归之处，不一样的是React是经过建立和更新虚拟元素来管理整个Virtual DOM的。
JSX将HTML语法直接加入到JavaScript代码中，而后经过翻译器转换成纯JavaScript语法由浏览器解读。实际开发中，JSX在产品打包阶段就已经编译成了纯JavaScript，会让代码更直观和便于维护。
编译过程是由Bable的JSX编译器实现的。

1.5 组件和函数式编程

react把过去不断重复构建UI的过程抽象成组件，且在给定参数的状况下约定渲染对应的UI界面。函数式编程使得React能充分利用不少函数方法减小冗余代码。

2. React原理

React把用户界面抽象成一个个组件，开发者经过组合这些组件，最终获得功能丰富、可交互的页面。经过引入JSX语法，复用组件就变得容易，同时也能够保证组件结构清晰。有了组件这层抽象，React实现了把代码和真实渲染目标分隔开来。
和vue同样，react是一个用于构建用户界面的 JavaScript 库,起初只是Facebook的一个内部项目，用来架设 Instagram 的网站，后于2013年5月开源。
特色：
一、使用 JSX语法 建立组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
二、性能高的让人称赞：经过 diff算法 和 虚拟DOM 实现视图的高效更新
核心概念：
一、虚拟DOM（Virtual DOM）
二、Diff算法（虚拟DOM的加速器，提高React性能的法宝）

3. React特色

6点：声明式设计、高效、灵活、JSX语法、组件和单向响应的数据流。

• 声明式设计指React采用声明范式，能够轻松描述应用（jsx就是一个最明显的声明式，简单、粗暴，直接声明全部dom元素和属性）；
• 高效指React经过对虚拟DOM的模拟，最大限度的减小了与DOM的交互；
• 灵活是指React能够和已知的库或者框架很好的配合；
• JSX语法是javascript 语法的拓展；
• 组件：经过React构建组件，使得代码更容易获得复用，能更好的应用于大型开发；
• 单向响应的数据流：React实现了这点，从而减小了重复代码，比传统绑定数据更简单的缘由就在于此。

4. React核心

React的核心是组件
组件设计的目的（三大优点）：

• 提升代码复用率     组件将数据和逻辑封装，相似面向对象的类
• 下降测试难度        组件高内聚低耦合，很容易对单个组件进行测试
• 下降代码复杂度     直观的语法提升了可读性

注：
高内聚：每个组件专一作本身的功能
低耦合：组件之间耦合度低,不会相互有太大影响

5. React的精髓

函数式编程是React的精髓
简单说，"函数式编程"是一种"编程范式"，也就是如何编写程序的方法论。它属于"结构化编程"的一种，主要思想是把运算过程尽可能写成一系列嵌套的函数调用。
函数式编程的好处：

• 代码简单，开发快速              由于它把逻辑开发运算过程尽量地写成了一系列嵌套函数，进行调用
• 接近天然语言，易于理解       JS函数式的开发语言
• 更方便的代码管理                 封装函数使得后期修改更加方便
• 易于"并发编程"                     能够同时进行不少函数的声明和操做
• 代码的热升级                        浏览器无刷新的状况下自动
• 是简单函数，易于测试

6. Vue与React两个框架的区别

相同点

1. 数据驱动视图，提供响应式的视图组件
2. 都有Virtual DOM，组件化开发，经过props参数进行父子组件数据的传递，都实现webComponents规范
3. 都支持服务端渲染
4. 都有支持native的方案，React的React native，Vue的weex

不一样点

1. 社区：React社区仍是要比vue大不少；
   
2. 开发模式：React在view层侵入性仍是要比Vue大不少的,React严格上只针对MVC的view层，Vue则是MVVM模式的一种实现；
   
3. 数据绑定：Vue有实现了双向数据绑定，React数据流动是单向的
   
4. 数据渲染：对于大规模数据渲染，React要比Vue更快，渲染机制启动时候要作的工做比较多；
   
5. 数据更新方面：Vue 因为采用依赖追踪，默认就是优化状态：你动了多少数据，就触发多少更新，很少也很多。React在复杂的应用里有两个选择:
   (1). 手动添加 shouldComponentUpdate 来避免不须要的 vdom re-render。 (2).Components 尽量都用 pureRenderMixin，而后采用 redux 结构 + Immutable.js；
   
6. 开发风格的偏好：React 推荐的作法是 JSX + inline style，也就是把 HTML 和 CSS 全都写进 JavaScript 了，即"all in js"；Vue进阶以后推荐的是使用 webpack + vue-loader 的单文件组件格式，即html,css,js写在同一个文件；
   
7. 使用场景：React配合Redux架构适合超大规模多人协做的复杂项目;Vue则适合小快灵的项目。对于须要对 DOM 进行不少自定义操做的项目，Vue 的灵活性优于 React；
   
8. Vue要比React更好上手，具体可能体如今不少人不熟悉React的JSX语法和函数式编程的思想，以及想要发挥出React的最大威力须要学习它一系列生态的缘故；
   
9. Vue着重提升开发效率,让前端程序员更快速方便的开发应用。React着重于变革开发思想，提高前端程序员编程的深度与创造力,让前端工程师成为真正的程序员而不是UI的构建者；

7. Vue与React两个框架各自的优点

Vue的优点包括：

• 模板和渲染函数的弹性选择
• 简单的语法及项目建立
• 更快的渲染速度和更小的体积

React的优点包括：

• 更适用于大型应用和更好的可测试性
• 同时适用于Web端和原生App
• 更大的生态圈带来的更多支持和工具