React起源、特点、React与MVC、React与Vue渲染流程、JSX原理、VDOM

React起源

---

• 1.Facebook+Instagram+社区 团队项目
• 2.开源时间：2013.5
• 3.开发背景：
  • 为了在ins代替体积庞大的Query、FaceBook参考了当地比较热火的MVC模式框架，但还是 不是很满意，于是决定自己开发一套——React

React VS MVC

---

• 1.React是一个轻量级的视图层框架 MVC——>V
• 2.React的核心：组件系统
• 3.React高性能，因为React使用了虚拟DOM

何为虚拟DOM？

• 使用js对象模型来模拟真实DOM，那么这个模型就是虚拟DOM

虚拟DOM为什么性能高？

• 因为操作的是虚拟DOM，大大减少了真实的DOM操作，则会节省内存，降低消费。

虚拟DOM工作流程？

• Vue
  • 1.数据模板——>创建VDOM【jsx】
  • 2.render函数渲染jsx——>虚拟DOM模型
  • 3.在mounted渲染真实DOM
  • 4.当Data选项数据改变时
  • 5.再一次生成VDOM
  • 6.通过diff算法【使用js进行同级比较】，比对生成patch补丁对象
  • 7.根据patch补丁对象重新渲染真实DOM
• React
  • 1.根据模板——>创建VDOM【jsx】
  • 2.render函数渲染jsx——>虚拟dom对象模型
  • 3.在componentDidMount渲染真实DOM
  • 4.当Data发生改变时
  • 5.再次生成VDOM
  • 6.通过React Filber算法进行比较，生成补丁对象
    • React 16版本之后才开始使用Filber算法，之前的版本都是使用diff算法
  • 7.根据patch补丁对象重新渲染真实DOM

React Filber算法

---

• 概念：将一个大的任务分成多个小片，然后执行每一个小片，每一个小片执行的时间很短，总时间很长，但是给其他任务提供了可以执行的机会。

React特点

---

• 1.虚拟DOM
• 2.组件系统
• 3.单项数据流——组件系统
• 4.JSX语法

JSX原理

---

• Vue:vue-loader编译
• React：jsx-babel
• JSX：使用JSX-baber——》js obj——》render——》DOM——》append