此文内容包括以下： 深度介绍react、vue2、vue3的diff算法原理，并分别对比它们的区别。几个算法，套路都是找到移动的节点，然后给它移动到正确的位置。该加的新节点添加好，该删的旧节删了。

本文实现简单版本的 React，参考 React 16.8 的基本功能，包括虚拟 DOM、Fiber、Diff 算法、函数式组件、hooks 等。

熟悉 react 的朋友都知道，在 react 中有个核心的算法，叫 diff 算法。web 界面由 dom 树组成，不同的 dom 树会渲染出不同的界面。react 使用 virtual dom 来表示 dom 树，而 diff 算法就是用于比较 virtual dom 树的…

本文通过对React事件系统和源码进行浅析，回答“为什么React需要自己实现一套事件系统？”和“React的事件系统是怎么运作起来的？”两个问题。React为了性能和复用，采用了事件代理，池，批量更新，跨浏览器和跨平台兼容等思想，将事件监听挂载在document上，构造合成事…

Hooks 顾名思义，字面意义上来说就是 React 钩子的概念。通过一个 case 我们对 React Hooks 先有一个第一印象。 假设现在要实现一个计数器的组件。如果使用组件化的方式，我们需要做的事情相对更多一些，比如说声明 state，编写计数器的方法等，而且需要理解…

React通过引入Virtual DOM的概念，极大地避免无效的Dom操作，已使我们的页面的构建效率提到了极大的提升。但是如何高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处同样也决定着页面的性能，React用其特殊的diff算法解决这个问题。Virtual …

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

也许你看过其他的ssr教程都会先说一说spa和ssr的区别以及优缺点，但是我相信能点进来看的小伙伴们肯定是对这两个概念有过了解的，也无需我在这里多费口舌。不懂的可以直接看这里 首先我们创建一个react-ssr文件夹, 执行git init初始化git仓库，添加如下目录和文件。…

8 . 配置tsconfig 9 . 项目启动