Preact（React）核心原理详解

原创： 宝丁 玄说前端

本文作者：字节跳动 - 宝丁

• 一、Preact 是什么
• 二、Preact 和 React 的区别有哪些？
• 三、Preact 是怎么工作的
• 四、结合实际组件了解整体渲染流程
• 五、Preact Hooks
• 结束语
• 2.1 事件系统
• 2.2 更符合 DOM 规范的描述
• 3.3.1 Diff children
• 3.3.2 Diff
• 3.3.3 Diff props
• 3.1 JSX
• 3.2 Virtual DOM
• 3.3 Preact 的 Virtual DOM 的 Diff 算法
• 4.1 初次渲染
• 4.2 执行 setState
• 5.3.1 useEffect 和 useLayoutEffect
• 5.2.1 useReducer
• 5.2.2 useState
• 5.1.1 useMemo
• 5.1.2 useCallback
• 5.1.3 useRef
• 5.1 MemoHook
• 5.2 ReducerHook
• 5.3 EffectHook

在前端界，React 一定是我们耳熟能详的前端开发框架之一，它的出现可以说是带给了我们全的 Web 开发体验，其中也带来了许多新的概念：JSX、virtual-dom、组件化、合成事件等。当我们想从源码层面去研究它的原理时，由于 React 的源码的庞大和晦涩难懂，这也会变得异常困难。但是在爱好“造轮子”的前端界，我们会发现一些和 React 有着近乎相同的框架，本文的主人公 Preact 也是其一，但是它相对简练的代码，使得我们更好地去学习和研究它的原理。本文将从以下几个方面介绍：

• Preact 是什么？

• Preact 和 React 的区别有哪些？

• Preact是怎么工作的

• JSX

• Virtual Dom

• Preact 的 Virtual DOM Diff 算法

• Preact Hooks 的实现

• 一个组件的生命周期

一、Preact 是什么
简单而言，Preact 是 React 的 3KB 轻量级替代方案，它拥有着和 React 一样的 API。有同学或许会问，Preact 中的 P 的含义是什么，根据 Preact 的作者表述的是 performance 的含义，这也是 Preact 框架的目标之一。
我们先来看用 Preact 编写的几个例子：

图 1

图 2
大家第一眼看上去，和 React 的写法基本上一致的，如果仔细的看，大家可能会几个疑问：

1. h 进行了变量的声明，但是没有使用，这个有什么意义？可以去掉么？
2. 表单里面使用的是 onInput 方法，而不是在 React 中写的 onChange 方法，这是为什么？

在这里我先不直接告诉大家答案，这些疑问会在下面的内容中一一为大家解答。
二、Preact 和 React 的区别有哪些？
Preact 号称打包后的体积只有 3KB，自然相比 React 而言，在某些方面进行了精简，并且它本身的定位也不是准备从新实现一个 React，所以两者之间肯定是存在一些区别。
我们在这里主要介绍两者最主要的区别：

• 事件系统
• 更符合 Dom 规范的描述

2.1 事件系统
通过一个例子，大家或许就能知道两者的区别。

图 3
在 React 内部，其自身实现了一套事件合成系统，所以我们一般在 React 的表单组件中使用的都是 onChange 方法来进行组件值的更新，而在 Preact 内部，没有事件合成系统，它直接使用的是由浏览器原生提供的事件系统，这也是为什么 Preact 在表单里面使用的是 onInput 方法，而不是在 React 中写的 onChange 方法。这也是它体积更小的直接原因之一。
2.2 更符合 DOM 规范的描述
在 React 中我们想描述一个 DOM 的类名，必须要使用 className, 而在 Preact 中，不仅可以使用 className 来描述，也可以直接使用 class 来描述 DOM 的类名，这也使得 Preact 更接近原生 DOM 规范的描述。
当然除了这些，Preact 和 React 直接还有一些差别，由于它不是本文的重点，在这里我们就不一一展开介绍，大家可以直接通过 Preact 官网来进一步了解。
三、Preact 是怎么工作的
在本节，我们将开始介绍 Preact 的内部工作流