React 必须知道的一些概念

框架和库的区别:

1.库是将代码集合成的一个产品,供程序员调用。

  面向对象的代码组织形式而成的库也叫类库。面向过程的代码组织形式而成的库叫函数库。在函数库中的可直接使用的函数叫库函数。此外还有UI组件库

  - 小而巧,只提供了特定的API,优点就是船小好调头,可以很方便的从一个库切换到另一个库,但是代码几乎不会改变。

2.框架则是为解决一个(一类)问题而开发的产品。

  框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。

  - 大而全,框架提供了一整套的解决方案,所以如果在项目中,想切换到另外的框架,是比较困难的。

总结理解:

  库,相当于是基于 框架 封装的一类的组件集合。

什么是中间件?

  顾名思义就是在一个执行流程中间用的一个组件,截住过路的然后对其进行控制增强的操作来满足我们的需求。

  react 中间件都是对 store.dispatch() 的增强。

React

React 就是纯粹写UI组件的,React 和 react-router, react-redux 结合起来才称得上框架,而React本身只是充当一个前端渲染的库而已。

React 的各种库都用过哪些:react-router 、redux 、react-redux 、echarts 、antd 、moment 、less 、AicGis 、highCharts

redux 的中间件:applyMiddleware 、redux-thunk 、redux-promise 、redux-saga

react 的高阶组件用过哪些:withRouter、connect、自己分装的高阶组件

react 的脚手架:Create React Appdvaumiice

  dva是蚂蚁金服开源的一套基于react,redux,redux-saga,react-router技术栈的框架。也可以说是一种开发的解决方案。

    redux-saga 基于 Generator 来处理异步事务流程

  umi 包含了 dva

添加装饰器支持@connect

react 对比 vue 的优势:

  • 更适合大型应用和更好的可测试性
  • Web端和移动端原生 APP 通吃
  • 更大的生态系统,更多的支持和好用的工具(搭配的router和redux以及其中间件包含了很多重要的思想)
  • 比较适合中大型项目(便于测试和后续调试)
  • 是一种在内存中描述 dom 树状态的数据结构
  • 支持在服务端渲染

虚拟DOM(Virtual Document Object Model)

  react (单向响应数据流,双向数据绑定)和 vue 在设计中都使用了虚拟 DOM(Virtual DOM)。

  DOM的本质是什么:浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作元素的 API。

  什么是React中的虚拟DOM:是框架中的概念,是程序员用JS对象来模拟页面上的 DOM元素 和 DOM嵌套关系。

  为何使用虚拟 DOM ?

    渲染用户界面的时候,dom 的操作成本是最高的,采用虚拟 DOM 是为了尽可能的减少对 dom 的操作。

  虚拟DOM 为何能减少对 dom 的操作?

    Virtual DOM 是一个映射真实 DOM 的 JavaScript 对象,如果需要改变任何元素的状态,那么是先在 Virtual DOM 上进行改变,而不是直接改变真实的 DOM

    当有变化产生时,一个新的 Virtual DOM 对象会被创建并计算新旧 Virtual DOM 之间的差别。之后这些差别会应用在真实的 DOM 上。

  改变真实的 DOM 状态远比改变一个 JavaScript 对象的花销要大得多。

Diff算法 (different算法:提供了新旧DOM对比的最优方案)

  tree diff:新旧两颗DOM树,逐层对比的过程,就是Tree Diff,当整棵DOM逐层对比完毕,则所有需要被按需更新的元素,必然能够找到

  component diff:在进行Tree Diff的时候,每一层中,组件级别的对比,叫做Component Diff

    - 如果对比前后,组件类型相同,则暂时认为此组件不需要更新

    - 如果对比前后,组件类型不同,则需要移除旧组件,创建新组件,并追加到页面上

  element diff:在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这就叫做Element Diff