关于数据流的实践记录highmap map collection记录一个雪碧图计算方法React GuidebookFiber 是一个基于优先级策略和帧间回调的循环任务调度算法的架构方案。 问题:随着应用变得越来越庞大,整个更新渲染的过程开始变得吃力,大量的组件渲染会导致主进程长时间被占用,导致一些动画或高频操作出现卡顿和掉帧的情况。而关键点,便是 同步阻塞。在之前的调度算法中,React 需要实例化每个类组件,生成一棵组件树,使用 同步递归 的方式进行遍历渲染,而这个过程最大的问题就是无法 暂停和恢复 。 解决方法:当遇到进程同步阻塞的问题时, 任务分割、 异步调用 和 缓存策略 是三个显著的解决思路。而 React Fiber 便是为了实现任务分割而诞生的。 💡 Fiber 架构的核心思想就是 任务拆分 和 协同 ,主动把执行权交给主线程,使主线程有时间空档处理其他高优先级任务。 究其原因是浏览器的渲染引擎是单线程,它将 GUI 描绘、时间器处理、事件处理、JavaScript 执行、远程资源加载通通放在一起。当做某件事,只有将它做完才能做下一件事。如果有足够的时间,浏览器是会对我们的代码进行 编译优化(JIT)及进行 热代码优化 ,一些 DOM 操作,内部也会对 Reflow(重绘)进行处理。 Reflow 是一个性能黑洞,很可能让页面的大多数元素进行重新布局。 之前的问题主要的问题是任务一旦执行,就无法中断,JavaScript 引擎线程一直占用主线程,导致卡顿。 页面是一帧一帧绘制出来的,当每秒绘制的帧数(FPS)达到 60 时,页面是流畅的,小于这个值时,用户会感觉到卡顿。 1 秒 60 帧,所以每帧分到的时间是 1000/60 ≈ 16.6 mshttps://tsejx.github.io/react-guidebook/infrastructure/new/fiberReact 技术揭秘本书的宗旨是打造一本严谨、易懂的 React 源码分析教程。 为了达到这个目标,在行文上,本书会遵循: 不预设观点 -- 所有观点来自React核心团队成员在公开场合发表的内容。 丰富的参考资料 -- 包括在线Demo、文章、视频。 代码剪枝 -- 讲解流程时只关注流程相关的代码,省略额外功能的干扰。 保持更新 -- 在 React版本更新后会及时补充。当前版本 v16.13.1 master分支 。 我们并没有从如 ReactDOM.render、 this.setState或 Hooks等这样日常开发耳熟能详的 API入手,而是从 理念 这样比较高的抽象层次开始学习,这是有意为之的。 从理念到架构,从架构到实现,从实现到具体代码。 这是一个自顶向下、抽象程度递减,符合认知的过程。如果直接讲解API,那么很容易陷入源码的汪洋大海。 ✅ React理念 ✅ 老的React架构 ✅ 新的React架构 ✅ 源码的文件结构 ✅ 调试源码 ✅ 深入理解JSX ✅ 总结 ✅ Fiber架构 ✅ 双缓存机制 ✅ 流程概览 ✅ beginWork ✅ completeWork ✅ 流程概览 ✅ before mutation阶段 ✅ mutation阶段 ✅ layout阶段 ✅ 概览 ✅ 单节点Diff ✅ 多节点Diff ✅ 流程概览 ✅ 心智模型 ✅ Update ✅ 深入理解优先级 ✅ ReactDOM.render ✅ this.setState ✅ Hooks理念 🔲 batchedUpdates 🔲 bailouthttps://kasong.gitee.io/just-react/react diff 学习常见问题记录diff 补充破解mutationobserverWeb playback benchmark info