这两天自己简单的看了下 setState 的部分实现代码，在这边给到大家一个自己个人的见解，可能文字或图片较多，没耐心的同学可以直接跳过看总结(源码版本是16.4.1)。 、performWorkOnRoot、performSyncWork、performAsyncWork这四…

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

一提到React，学过的人都会想到提高性能的两大神奇特色：虚拟DOM & diff算法。React diff作为Virtual DOM的加速器，其算法的改进优化是React整的界面渲染的基础，以及性能提高的保障。虽然开发中不需要知道其运行机制，但是理解之后有助于更好的理解Rea…

setState(updater, callback)这个方法是用来告诉react组件数据有更新，有可能需要重新渲染。它是异步的，react通常会集齐一批需要更新的组件，然后一次性更新来保证渲染的性能，所以这就给我们埋了一个坑： 那就是在使用setState改变状态之后，立刻通…

蓝色框框的部分分别是Diff算法的核心代码updateChildren以及processUpdates，通过Diff算法获取了组件更新的updates队列之后一次性进行更新。 《深入React技术栈》这本书对Diff算法的解释比较好。其实只要记住几个原则以及在具体的计算upda…

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

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