01. React-基础概念

两个概念

  • library(库):小而巧,只提供特定的API;jQuery,库之间的切换比较方便,代码几乎不会改变
  • Farmework(框架):大而全,提供了一整套的解决方案,vue,项目框架不易切换

前端三大主流框架

  • Angular.js
  • Vue.js
  • React,js

React与Vue的对比

组件化方面

  • 什么是模块化:从代码角度;将可复用的功能代码抽离为单个模块;便于项目的维护和开发;例如:node.js
  • 什么是组件化:从UI角度;将可复用的UI元素,抽离为单个组件;便于项目开发和维护;例如:react和vue;组件包含三个要素:结构(HTML)、行为(JavaScript)、样式(css)
  • Vue是如何实现组件化的:通过.vue文件,来创建对应组件;该文件包含三个部分:
    • template 结构
    • script 行为
    • style 样式
  • React如何实现组件化:一切都以js来表现的,语法遵循ES6ES7(async、await)标准

开发团队

  • Vue.js:第一版,主要由 尤雨溪 专门进行维护;2.x 后,由 尤雨溪为主的开源团队
  • React.js:由Facebook前端官方团队进行维护和更新

社区

  • Vue最近两年才流行起来,社区相对较小,有一些坑没人踩过
  • React诞生较早,社区强大,常见问题、坑、最优解决方案、文档、博客在社区里面比较丰富

移动App开发体验

  • Vue,结合Weex这门技术,提供了迁移到移动端App开发的体验。(Weex,比较初级,没有很成功的大案例)
  • React,结合ReactNative,提供了无缝迁移到移动APP的开发体验(RN用的对多)。

为什么要学习React

  • 和Angular1相比,React设计很优秀,一切基于JS并且实现了组件化的思想
  • 开发团队实例强悍,不必担心断更的情况
  • 社区强大,很多问题都可以找到对应的解决方案
  • 提供了无缝转到ReactNative上的开发体验
  • 很多企业中,前端项目的技术选型采用React.js

React中的核心概念

虚拟DOM(Virtual Document Objec Model)

  • DOM的本质是什么:浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API
  • 什么事React中的虚拟DOM:是框架中的概念,是程序员用JS对象来模拟页面上的DOM和DOM嵌套
  • 为什么要实现虚拟DOM:为了实现页面中,DOM元素的高效更新
  • DOM和虚拟DOM的区别:
    在做table表格排序功能时,如果只是第一行和第二行交换,其他行无序改变。
    浏览器未提供DOM树的API,因为无法拿到浏览器内存中的DOM树,排序时会将整个table重新渲染;
    使用虚拟DOM,通过diff算法,可以按需渲染,只重新渲染改变的行。

diff算法

  • tree diff:新旧两颗DOM树,逐层进行对比的过程,就是tree diff,当整颗DOM对比完毕,则所有需要被按需更新的元素必然可以找到
  • component diff:在进行tree diff,每一层中组件级别的对比,叫做Component Diff;
    • 如果对比前后,组件的类型相同,则暂时认为此组件不需要被更新;
    • 如果对比前后,组件类型不同,则需要移除旧组件,常见新组件,并追加到页面上;
  • element diff:在进行组件对比的时候,如果两个组件类型相同,则需要进行元素级别的对比,这就是Element Diff

你可能感兴趣的:(React.js,javascript,react)