react框架总结 | 青训营笔记

117 阅读3分钟

前端框架(react.js)

知识点:

  1. 三大JS框架的区别
  2. React和Vue的对比
  3. React的优点和特点
  4. Hooks
  5. 生命周期
  6. Redux
  7. 纯函数
  8. 高阶组件
  9. react15、16、17的区别
  10. 扩展

1.三大JS框架的区别:

  • Angular带有比较强的排它性的
  • React主张是函数式编程的理念,侵入性没有Angular那么强,主要因为它是软性侵入。
  • Vue 渐进式的

你如何看待react /什么是react react就是一个框架 他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序

react相对其他框架优势: 高性能高效率 实现了前端界面的高性能高效率开发,所以说react很擅长处理组件化的页面

2.React与Vue对比

  2.1 相同之处

  1. 虚拟 DOM。映射真实 DOM,通过新旧 DOM 的 diff 对比,更好的跟踪渲染页面。
  2. 组件化。将应用拆分成一个个功能明确的模块,每个模块之间可以通过合适的方式互相联系。
  3. 构建工具。都有自己的构建工具,通过 Webpack + Babel 去搭建脚手架。
  4. Chrome 开发工具。两者都有很好的 Chrome 扩展去帮助查找 Bug。
  5. 配套框架。Vue 有 Vue-routerVuex,而 React 有 React-routerReact-Redux

2.2 不同之处

  1. 模板 VS JSX。Vue 推荐编写近似常规 HTML 的模板进行渲染,而 React 推荐 JSX 的书写方式。
  2. 监听数据变化的不同。Vue 使用的是可变数据,而 React 更强调数据的不可变。在 Vue 中通过 v-model 绑定的数据,用户改变输入值后对应的值也相应改变。而 React 需要通过 setState 进行设置变化。
  3. Diff 不同。Vue 通过双向链表实现边对比边更新 DOM,而 React 通过 Diff 队列保存需要更新的 DOM,得到 patch 树,再统一批量更新 DOM。
  4. 开发团队。Vue 一开始核心就是 Evan You,后面再招了其他人组成团队;React 的话是一开始就是 Facebook 团队搞的。所以网上的人比对源码情况的话,Vue 的比 React 的简单易懂点。

3.react特点和优势:

3.1.虚拟dom

虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。

是一个JavaScript对象,重新渲染的时候,会对比这一次产生的Virtual DOM和上一次渲染的Virtual DOM,对比发现差异之后,只需修改真正的DOM树时就只需要触及差别中的部分就行,使用这个虚拟dom,避免对原生dom的创建和对比,这样就大大提升了性能,因为原生dom的创建是非常 消耗性能的,而对js对象的对比和创建对性能开销很小,从这种方式来提供应用的性能

3.2.组件

组件化 组件指的就是同时包含了html、css、js、image元素的聚合体

每个组件和组件都相互独立 便于维护

组件是通过React.createClass创建的(ES5),在es6中直接通过class关键字来创建

组件的划分要满足高内聚,低耦合的原则。

  • 高内聚是指把逻辑紧密相关的内容放在一个组件中。
  • 低耦合指的是不同组件的依赖关系要尽量弱化,每个组件要尽量独立。

组件其实就是一个构造器,每次使用组件都相当于在实例化组件

react的组件必须使用render函数来创建组件的虚拟dom结构

组件需要使用ReactDOM.render方法将其挂载在某一个节点上

组件的首字母必须大写

3.3.单向数据流 数据绑定 父到子

3.4.jsx树

通过跟babel结合把jsx里面的东西转成JavaScript对象