Fiber

React 从 原有的stack reconciler 变成了现有的 Fiber reconciler。

Fiber出现原因

js引擎和页面渲染引擎是在同一个渲染线程之内，两者是互斥关系。

stack reconciler困局

Fiber 架构设计

增量渲染

可中断，可恢复与优先级

React 之前的方式 ：

Reconciler(找不同) -> Renderer(渲染不同)

React改为Fiber以后：增加了调度层和修改了Reconciler层

Scheduler(调度更新优先级) -> Reconciler(找不同) -> Renderer(渲染不同)

生命周期影响

render 的工作单元有着不同的优先级

React可以根据优先级高低去实现工作单元的打断和恢复

Fiber执行原理

从根节点开始渲染和调度的过程可以分为两个阶段：render 阶段、commit 阶段。

  • render 阶段：这个阶段是可中断的，会找出所有节点的变更

  • commit 阶段：这个阶段是不可中断的，会执行所有的变更

LogoReact 组件，元素和实例 – React Blog
Logo协调 – React
LogoGitHub - reactjs/react-basic: A description of the conceptual model of React without implementation burden.GitHub
LogoGitHub - acdlite/react-fiber-architecture: A description of React's new core algorithm, React FiberGitHub
Logo走进React Fiber的世界 - 掘金
走进React世界
上一页事件下一页数据结构

最后更新于

这有帮助吗？