react学习

一：react 理念 - 快速响应，解决快速响应 - 同步更新变为可中断异不更新。

二：react 架构  调度器（任务优先级）/ 协调器 找变化组件 /渲染器 将变化组件渲染在页面

当项目变得庞大、组件数量繁多时，就容易遇到CPU的瓶颈。 JS脚本执行 ----- 样式布局 ----- 样式绘制

IO的瓶颈- 接口请求慢

时间切片 将同步的更新变为可中断的异步更新。

二：React16架构可以分为三层：

Scheduler（调度器）—— 调度任务的优先级，高优任务优先进入Reconciler

Reconciler（协调器）—— 负责找出变化的组件

Renderer（渲染器）—— 负责将变化的组件渲染到页面上

React16采用新的Reconciler。 Reconciler内部采用了Fiber的架构。

React Fiber可以理解为：

React内部实现的一套状态更新机制。支持任务不同优先级，可中断与恢复，并且恢复后可以复用之前的中间状态。

其中每个任务更新单元为React Element对应的Fiber节点。

三：Fiber包含三层含义：

作为架构来说，之前React15的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler。

作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型（函数组件/类组件/原生组件...）、对应的DOM节点等信息。

作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新...）。

四：React使用“双缓存”来完成Fiber树的构建与替换——对应着DOM树的创建与更新。 双缓存：在内存中构建并直接替换