React学习笔记(一)背景+概念

1 React背景

1.1 前端的三大框架

Angular

• 非开源
• 出现比较早的前端框架
• 近几年使用较少

React

• 开源

• facebook的前端公司开发

  • 当时开发一个图片交友网站时,市面上没有合适的框架,React出现了

• 使用

  • 腾讯QQ
  • 京东
  • 百度

Vue

• 开源
• 近几年火起来的
• 使用
  • 阿里旗下的软件
  • 阿里融资的软件
  • 淘宝 饿了么

1.2 比较

React

• 组件化开发
  • 组件的行为,结构,样式都是使用js实现
• 比Vue出现早,所以对该框架出现的问题或者坑, 社区出现的解决方案比较多
• 国外的,开发团队资金实力雄厚

Vue

• 组件化开发

  • 组件有独立的模块负责
    • template -----> 结构
    • script ------> 行为
    • style ----> 样式

• 开发团队: 尤雨溪

2 React 介绍

2.1 概念

• 虚拟DOM
• diff算法

2.1.1 虚拟DOM

• 实现DOM元素的高效更新(改变的位置更新)
• 以js对象形式模拟页面上DOM元素的嵌套关系

DOM树渲染

• 1 页面发出页面数据改变的请求
• 2 数据库最新的数据存在内存中(替换到旧的数据)
• 3 将内存中最新的数据渲染到页面

高效更新 js对象 模拟嵌套关系

2.1.2 diff算法

• tree diff
• component diff
• element diff

tree diff

• DOM树的逐层比较 找到被改变的那一层级

component diff

• 组件级的比较,包括类型的比较 ,组件是由元素组成 找到被改变的组件

element diff

• 元素级的比较 找到被改变的元素