前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber怎么做到中断恢复的的

简介: 前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber怎么做到中断恢复的的

react-fiber怎么做到中断恢复的的


在上文我们得出结论,“渲染” 过程如果要中断,只能选择在 Reconcile 阶段,因为这个阶段只涉及 Fiber 的变更,而没有产生实际 DOM 的变更。



image.png



eginWork


处理每个 Fiber 上更新,将结果同步在 **Fiber** 的 memoizedProps 、memoziedState 上,并使用 Flags 来标记每个节点需要进行何种处理。


这个阶段是从顶到下地遍历 **Fiber** 结构,先处理自身,然后子节点 **child**,没有子节点处理兄弟节点 **sibling** 。


completeUnitOfWork


将每个 **Fiber** 的全部子节点的 **flags** 和 **subtreeFlags** 都标记在自己的 **subtreeFlags** 上。


这个阶段是从下至上进行回溯的,因为要读取子节点标记的原因,需要保证子节点先处理完成。


如上图可见 **Reconcile** 的整体流程,在每处理完成一个 Fiber 节点时,会检查时间片是否到时,如果到了,则会中断此次 “渲染” 。


等到下一次进来的时候,可以直接从 **workInProgress** 上次中断的 Fiber 节点开始处理即可




相关文章
|
11月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
281 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
12月前
|
设计模式 Java 关系型数据库
【Java笔记+踩坑汇总】Java基础+JavaWeb+SSM+SpringBoot+SpringCloud+瑞吉外卖/谷粒商城/学成在线+设计模式+面试题汇总+性能调优/架构设计+源码解析
本文是“Java学习路线”专栏的导航文章,目标是为Java初学者和初中高级工程师提供一套完整的Java学习路线。
761 37
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
208 57
|
12月前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
10月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
199 1
|
12月前
|
存储 Java 关系型数据库
学成在线笔记+踩坑(0)——面试问题
介绍你的项目、项目难点、表是怎么设计的?、断点续传是怎么做的?、如何保证任务不重复执行? 、任务幂等性如何保证、分布式锁的三种实现方式
学成在线笔记+踩坑(0)——面试问题
|
11月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
前端开发 应用服务中间件 API
"揭秘!面试官必问:你是如何巧妙绕过跨域难题的?前端代理VS服务器端CORS,哪个才是你的秘密武器?"
【8月更文挑战第21天】在软件开发中,尤其前后端分离架构下,跨域资源共享(CORS)是常见的挑战。主要解决方案有两种:一是服务器端配置CORS策略,通过设置响应头控制跨域访问权限,无需改动前端代码,增强安全性;二是前端代理转发,如使用Nginx或Webpack DevServer在开发环境中转发请求绕过同源策略,简化开发流程但不适用于生产环境。生产环境下应采用服务器端CORS策略以确保安全稳定。
235 0
|
11月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
835 14
|
11月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
202 0

热门文章

最新文章