阅读 13

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月开源。
特点:
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两个框架的区别

相同点

  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
  • 更大的生态圈带来的更多支持和工具
关注下面的标签,发现更多相似文章
评论