React 底层 Fiber 架构 简单理解

一、 背景

JS 是引擎是单线程运行的；严格来说，JS 引擎和页面渲染引擎在同一渲染线程，两者互斥。那么就会遇到这样的一种情况：当前面一个任务长期霸占CPU，后面啥事也干不了，浏览器卡死，造成极差的用户体验。

对于前端而言，主要的解决方向：

1. 优化每个任务，让它有多快就多快。挤压CPU运算量
2. 快速响应用户，让用户觉得够快
3. 尝试 Worker 多线程

Vue选择了第一种，使用模板让它有了很多优化的空间，配合响应式机制可以让Vue可以精确地进行节点更新；
React选择了第二种，让用户看起来快。

React的优化

为了给用户制造一种应用很快的’假象’，我们不能让一个程序长期霸占着资源. 你可以将浏览器的渲染、布局、绘制、资源加载、事件响应、脚本执行视作操作系统的’进程’，我们需要通过某些调度策略合理地分配CPU资源，从而提高浏览器的用户响应速率, 同时兼顾任务执行效率。

所以 React 通过Fiber 架构，让自己的Reconcilation 过程变成可被中断。 '适时’地让出CPU执行权，除了可以让浏览器及时地响应用户的交互还可以：给浏览器一点喘息的机会，他会对代码进行编译优化（JIT）及进行热代码优化，或者对reflow进行修正。

React 通过 jsx 来描述界面结构，它会将 jsx 编译成 render function,执行后生成 vdom