七月夏天yn

是什么使得一个编程语言的新特性很棒？那就是当这个特性可以结合多个其它特性的时候。 ES2015 版本中引入的 for...of 语句就是这种情况。 for...of 可以迭代数组、类数组以及任何可以迭代的对象(maps、sets、DOM集合)，并且，for...of 的语句还很…

简单介绍：本人实现了一个常见问题列表，点击列表项进入详情页，目标是在页面切换的时候加过渡效果，提升用户体验。 下面来看具体怎么实现吧。 在 react 项目中可使用官网提供的动画过渡库 react-transition-group 来实现切换页面（路由切换）时的过渡效果。 其中…

上次讲述了任务的优先级，以及如何根据优先级（过期时间）加入任务链表,今天来分析一下如何在一个合适的时机去执行任务。 上文讲到要用requetAnimationFrame去模拟requestIdleCallback，但requetAnimationFrame有个缺点，就是当前ta…

自从react 16出来以后，react fiber相关的文章层出不穷，但大多都是讲解fiber的数据结构，以及组件树的diff是如何由递归改为循环遍历的。对于time slicing的描述一般都说利用了requestIdleCallback这个api来做调度，但对于任务如何调…

在上一篇文章这里我们讲到，在render阶段的beginWork函数中，会将上次更新产生的 Fiber 节点与本次更新的 JSX 对象（对应ClassComponent的this.render方法返回值，或者FunctionComponent执行的返回值）进行比较。根据比较的结…

通常我们会调研各种各样的生成策略，根据不同的业务，采取最合适的策略，下面我会讨论一下各种策略/算法，以及他们的一些优劣点。 UUID是通用唯一识别码（Universally Unique Identifier)的缩写，开放软件基金会(OSF)规范定义了包括网卡MAC地址、时间戳…

在本章剩下部分我们会讲解Fiber节点是如何被创建并构建Fiber树的。 render阶段开始于workLoopConcurrent方法的调用。 其中workInProgress代表当前已创建的workInProgress fiber。 performUnitOfWork方法会…

这是我的剖析 React 源码的第二篇文章，如果你没有阅读过之前的文章，请务必先阅读一下 第一篇文章 中提到的一些注意事项，能帮助你更好地阅读源码。 现在请大家打开 我的代码 并定位到 react-dom 文件夹下的 src 中的 ReactDOM.js 文件，今天的内容会从这…

在目前的前端领域，单页web应用（SPA）已经有了比较高的占有率，比较主流的web框架React、Angular、Vue几乎已经统治了前端市场。 单页应用确实带来了更好的前后端分离，以及用户体验好、快，内容的改变不需要重新加载整个页面等等的优点，喜忧参半，SPA应用首屏加载慢、…