关于数据流的实践记录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
