Fiber架构

[lewenweijia]

React - Basic Theoretical Concepts -- sebmarkbage
React Fiber架构
What is React Fiber ?
Cooperative Scheduling of Background Tasks
Fiber Principles: Contributing To Fiber
The how and why on React’s usage of linked list in Fiber to walk the component’s tree
W3C Cooperative Scheduling of Background Tasks
React Fiber单向链表架构

stack reconciler利用系统调用栈

stack reconciler -> 系统调用栈
fiber reconciler -> 人工栈

React两(x)三(/)大主题?:

1. component
2. vDOM
3. Reconciler(stack --> Fiber)

VDOM的内容会被及时sync同步到 real dom上的哦, 通过renderer, 实际的DOM的状态同步commit阶段

强制立即任务 > 动画(掉帧敏感) > 用户交互 > 网络 > 离屏界面事务

react-dom模块? 适用于浏览器端进行渲染React应用的渲染方案

[lewenweijia]

官方回答Fiber

What is “React Fiber”?

重要概念?: cooperative scheduling 协作调度?:
raf/ric -> 开放口子, 让开发者参与渲染主线程的渲染流程里面来的啊

Fiber is the new reconciliation engine in React 16. Its main goal is to enable 
incremental rendering of the virtual DOM. Read more.

哈哈, 完成一个流畅不丢帧的动画的啊, 然后用户输入也是可以的啊
通过在RIC的空闲周期里面进行time remaining的判断, 将控制权交换给渲染主线程
并注册自己在下一个RIC周期继续恢复执行

可怕的啊, `协作调度`应该是极致的效果操作了的吧!

1. 协调引擎 reconciler/reconciliation engine
2. vDOM的增量渲染(increment rendering)

[lewenweijia]

2019/08/01 In-depth explanation of state and props update in React

2018/11/27 Inside Fiber: in-depth overview of the new reconciliation algorithm in React

2018/11/06 The how and why on React’s usage of linked list in Fiber to walk the component’s tree

[lewenweijia]

React中的三种组件:

1. 类组件
2. 函数组件
3. 宿主组件