时间分片 旨在把一个运行时间比较长的任务分解成一块一块比较小的任务，分块去执行，因为超过 50ms 的任务就会被认为是 long task，用户就能感知到渲染卡顿和交互的卡顿，所以我们可以缩短函数的连

神奇的点击事件 你知道我们在 document 中，用鼠标点击一次页面会发生什么吗？ 这个过程中还有一些奇怪事情的一起出现了...

在写本文之前，事先阅读了网上了一些文章，关于 Hooks 的源码解析要么过于浅显、要么就不细致，所以本文着重讲解源码，由浅入深，争取一行代码也不放过。那本系列讲解第一个 Hooks 便是 useState，我们将从 useState 的用法开始，再阐述规则、讲解原理，再简单实现…

以下展示了count改变的来源，并非是通过事件监听或是事件绑定或是代理等对count本身做出的改变，而是重新创建了一个count， 新创建的count值是最后一次改变的state中的count. 我们发现，每次调用的count和handleAlertClick，都是重新创建的c…

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以直接在现有的函数组件中使用 Hooks 1. 类组件的不足 综上所述，如果不注意的话，很容易写成第三种写法，导致性能上有所损耗。 2. Hooks 优势 副作用的关注点…

本文适合0.5~3年的react开发人员的进阶。 react的源码，的确是比vue的难度要深一些，本文也是针对初中级，本意让博友们了解整个react的执行过程。 上一篇，从mini源码分析vue，也许深度比较一般，但是也花了好几天的时间去汇总，明白一个博主的不易。这是笔者第一篇…

createElement方法也是vue和react用来创建虚拟DOM的方法，我们也叫这个名字，方便记忆。接收三个参数，分别是type，props和children 到目前为止，已经轻而易举的实现了创建虚拟DOM。那么，接下来进行下一步，将其渲染为真实的DOM，别犹豫，继续回到…

当我们在组件上设置事件处理器时，React并不会在该DOM元素上直接绑定事件处理器. React内部自定义了一套事件系统，在这个系统上统一进行事件订阅和分发. 具体来讲，React利用事件委托机制在Document上统一监听DOM事件，再根据触发的target将事件分发到具体的…

虚拟列表即只渲染可视区域的数据，使得在列表数据庞大的情况下，只显示可视区域的数据，顶部和底部不可见的区域以一个空的dom来代替（留白），这样就能大量减少dom的渲染量，使得列表能够流畅地无限滚动，这在移动端是十分重要的。 实现虚拟列表的方案主要是计算出可视区域要显示哪些数据，然…