React学习总结 - Vae's Blog

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月开源。
特点
1、使用 JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
2、性能高的让人称赞：通过 diff算法和虚拟DOM 实现视图的高效更新
核心概念
1、虚拟DOM（Virtual DOM）
2、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两个框架的区别

相同点

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

不同点

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

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

Vue的优势包括：

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

React的优势包括：

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