React

概念

网页UI框架，本质为一个组件化框架
用于构建用户界面的js库，通过组件化方式构建快速响应的大型web应用程序
开发React的思维模式是完全不同的，概念也极为简单
React中只有组件，没有页面、控制器、模型
数据与组件
UI=fn（state），state计算出状态变化，fn将状态变化渲染在视图中
核心思路
声明式：可以做到一目了然，也便于组合
组件化：可以降低系统间功能的耦合性，提高功能内部的聚合性
通用性：将DOM抽象为虚拟DOM，开发者并不直接操作DOM。React也不再限于Web开发
优缺点
声明式、组件化与通用性
学习与使用成本高

JSX

jsx是js的语法扩展
同样为声明式
代码结构简洁明了
结构、样式和事件等实现高内聚低耦合
不需要引入新的概念和语法，只写js

虚拟DOM

React.createElement函数所返回的就是一个虚拟DOM，是描述真实DOM的纯js对象。跟平台无关，提高兼容性
可以实现差异化更新，减少更新DOM操作
不一定更快
消耗额外内存

函数组件 类组件

都可以接受属性并返回React元素
不同点
编程思想不同：类组件需要创建实例，是基于面向对象的方式编程。函数组件不需要创建实例，接受输入，返回输出，是基于函数式编程思想。
内存占用：类组件需要创建并保存实例，函数组件不需要创建实例
函数组件具有捕获特性
函数组件更方便进行单元测试
状态：类组件有自己的实例，可以定义状态，也可以修改状态更新组件。函数组件以前没有组件，现在可以使用useState使用状态
生命周期：类组件有自己完整的生命周期。函数组件以前没有，现在可以使用useEffect
逻辑复用：类组件可以通过继承实现逻辑复用、函数组件可以通过自定义Hooks实现逻辑复用
跳过更新：类组件可以通过shouldComponent和PureComponent来跳过更新。函数组件可以使用React.memo来跳过更新

React渲染过程

跨平台渲染：虚拟DOM
快速响应：异步可中断+增量更新

渲染流程：scheduler选择高优先级的任务进入reconciler；reconciler计算变更的内容；react-dom把变更的内容渲染到页面上。

requestldleCallback：快速响应用户，让用户觉得够快；使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件；正常任务完成后没有超过16ms，说明时间与富余，就会执行requestldeCallback中的注册任务

fiber

可以通过某些调度策略合理分配CPU资源，从而提高用户的响应速度

通过Fiber架构，让自己的调和过程变成可被中断，适时地让出CPU执行权，可以让浏览器及时的响应用户的交互

Fiber是一个执行单元，每次执行完一个执行单元后，React就会检查现在还剩多少时间，如果没有事件就将控制权让出去