上面是原型链神图，如果你能理解，你基本不用看这篇文章了。 如果不能理解那也没关系，下面 jsliang 跟你慢慢唠叨。 可以看到，对于同一个函数，我们通过 new 生成出来的实例，都会开出新的一块堆区，所以上面代码中 person 1 和 person 2 的吃饭是不同的（返回…

1. 引言 工具型文章要跳读，而文学经典就要反复研读。如果说 React 0.14 版本带来的各种生命周期可以类比到工具型文章，那么 16.7 带来的 Hooks 就要像文学经典一样反复研读。 Hooks API 无论从简洁程度，还是使用深度角度来看，都大大优于之前生命周期的 …

之前写过一篇 Redux 的源码解析文章，时隔几个月我又看了看 React Redux 的源码，这一次也是收获满满，所以写下了这篇博客记录一下我的收获。 React Redux 不同于 Redux，Redux 的设计目的在于提供一个独立于 UI 的数据中心，使得我们可以方便地在…

答：当项目复杂时 Fiber 树拥有很多很多的节点，如果通过遍历每个节点的方式去运行当前节点副作用的话时间复杂度会上升，所以在构建树的时候通过判断每个节点的 effectTag 将副作用关联起来生成一个链表可以有效的降低时间复杂度提升程序效率。 答：副作用处理 componen…

写一篇关于 React Fiber 的文章， 这个 Flag 立了很久，这也是今年的目标之一。 最近的在掘金的文章获得很多关注和鼓励，给了我很多动力，所以下定决心好好把它写出来。 我会以最通俗的方式将它讲透, 因此这算是一篇科普式的文章。不管你是使用React、还是Vue，这里…

2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，在写文章的时候参考资料比较多，比较容易深刻的理解。 React 作为我最喜欢的框架，没有之一，我愿意花很多时间来好好的学习他，…

总所周知，react源码不是一般的多，直接阅读react源码，真的是劝退... 虽然没有更完，但是写得相当精彩，反正我是看了还想看那种。（有点崔更了，哈哈） 在了解react架构之前，我们还需要了解一下浏览器渲染原理，主流的浏览器刷新频率为60Hz，即每（1000ms / 60…

setState() 将对组件 state 的更改排入队列批量推迟更新，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。其实setState实际上不是异步，只是代码执行顺序不同，有了异步的感觉。 为了更好的感知性能，React 会在同一周期内会对多个…

不卖关子，先揭晓答案，4 次 log 的值分别是：0、0、2、3。 若结果和你心中的答案不完全相同，那下面的内容你可能会感兴趣。 同样的 setState 调用，为何表现和结果却大相径庭呢？让我们先看看 setState 到底干了什么。 setState 只在合成事件和钩子函数…