React基础

React介绍

• 开源时间： 2013/5
• React开发的原因：
  • 为了在ins在代替体积庞大的jq，Facebook参考了当时比较热火的MVC模式框架，但是对他们都不是很满意，所以决定自己开发一套，这一套就是React

React vs MVC

1. React是一个轻量级的视图层框架，你可以认为它就是MVC中V
2. React的核心是： 组件系统
3. React高性能，因为React使用了虚拟DOM

虚拟DOM是什么

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

1. 虚拟DOM为什么性能高？
   • 因为我们操作的是虚拟DOM，大大减少真实DOM操作，那么就会节省内存，降低消耗
2. 虚拟DOM工作流程[vue/react ]
   • 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版本使用 】 算法进行比较，生成patch补丁对象
     7. 根据patch补丁对象重新渲染真实DOM

React Filber 算法是什么？

1. 概念

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

React 特点

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