Gahing's blog Gahing's blog
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

Gahing / francecil

To be best
首页
知识体系
  • 前端基础
  • 应用框架
  • 工程能力
  • 应用基础
  • 专业领域
  • 业务场景
  • 前端晋升 (opens new window)
  • Git
  • 网络基础
  • 算法
  • 数据结构
  • 编程范式
  • 编解码
  • Linux
  • AIGC
  • 其他领域

    • 客户端
    • 服务端
    • 产品设计
软素质
  • 面试经验
  • 人生总结
  • 个人简历
  • 知识卡片
  • 灵感记录
  • 实用技巧
  • 知识科普
  • 友情链接
  • 美食推荐 (opens new window)
  • 收藏夹

    • 优质前端信息源 (opens new window)
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 前端基础

  • 应用框架

    • UI 框架

      • Angular

      • React

        • React Hooks 实现原理
        • React 组件销毁需要注意的异步更新问题
        • React项目结构规范
        • React Fiber 实现原理
          • 草稿
          • 两个阶段
          • 简单说明
          • 总结
        • React Fiber 本质
        • React「 Refs 转发 」初探
        • React之低版本chrome setState loading2次状态出现的bug
        • react学习
        • 使用 immer 修改复杂对象
        • input 原生控件,React 是如何实现受控输入的?
        • useEffect 如何处理 async
        • 用组件替换文本中emoji字符
        • 谈谈 React 组件设计原则
      • Solid

      • Svelte

      • Vue

      • 框架本质

    • 开发框架

    • 组件库

  • 工程能力

  • 应用基础

  • 专业领域

  • 业务场景

  • 大前端
  • 应用框架
  • UI 框架
  • React
gahing
2021-09-21
目录

React Fiber 实现原理草稿

Fiber 架构想解决的是 React 的虚拟 DOM 树在构建和 DIFF 阶段无法打断的问题。

具体的实现方式有:

  1. 双缓冲机制:保留上一次状态和处理中的 Fiber 树。难点在于中断和恢复机制。
  2. 两阶段提交:虚拟 DOM 树构建可打断,提交变更不可打断
  3. 闲时调度:每一个 Fiber 节点都是一个最小执行单元

# 草稿

中断的执行单元? 不是单元内暂停,而是已经执行完了,准备执行下一个执行单元时中断。

每个虚拟dom是一个fiber单元,构成链表

fiber 遍历,为啥采用迭代代替递归? 需从头恢复,不能随意中断

componentWillMount 这些方法为什么不能用? 如果执行了副作用,会调用多次,

setState 执行 fiber 链后,

高优任务,放弃原链。

# 两个阶段

# 简单说明

协调(diff,非连续),提交

# 总结

  1. 双缓冲机制:2 个 Fiber 树,其中一个为 WIP ,用于处理进行中的 DIFF,并保持和原始 Fiber 树的差异。后续提交阶段直接应用差异更新真实 DOM
  2. 中断和恢复:待研究。。
编辑 (opens new window)
#精读
上次更新: 2024/09/01, 23:56:56
React项目结构规范
React Fiber 本质

← React项目结构规范 React Fiber 本质→

最近更新
01
浅谈代码质量与量化指标
08-27
02
快速理解 JS 装饰器
08-26
03
Vue 项目中的 data-v-xxx 是怎么生成的
09-19
更多文章>
Theme by Vdoing | Copyright © 2016-2024 Gahing | 闽ICP备19024221号-1
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式