
# 合成事件原理以及实现

合成事件是 React 中用于处理事件的机制，它在组件之间共享事件对象，避免了事件对象的频繁创建和销毁，提高了性能。

## 为什么需要合成事件

合成事件的主要原因是性能优化。在 React 中，每个事件对象都是一个独立的实例，每次触发事件时都需要创建一个新的对象。这会导致内存泄漏和性能问题。

通过合成事件，React 能够在组件之间共享事件对象，避免了频繁创建和销毁，提高了性能。

React 通过事件委托的方式，将事件处理函数绑定到根元素上，而不是每个组件上。当事件触发时，React 会根据事件类型和目标元素，将事件处理函数调用到对应的组件上。在 fiber 可以查询到对应的绑定的事件处理函数，从而实现事件的分发。

## 事件委托流程

1. 真实 DOM 触发事件
2. 根元素通过事件委托，拿到这个事件对象
3. 根据 fiber 节点收集事件处理函数
4. 模拟捕获和冒泡流程

## 合成事件实现

### 1. SyntheticEvent 类

合成事件对象需要包装原生事件，并提供统一的 API：

```javascript
class SyntheticEvent {
  constructor(e) {
    // 保存原生事件对象
    this.nativeEvent = e;
  }

  // 合成事件对象需要提供一个和原生事件类型同名的方法阻止冒泡
  stopPropagation() {
    this._stopPropagation = true;

    if (this.nativeEvent.stopPropagation) {
      this.nativeEvent.stopPropagation();
    }
  }

  test() {}
}
```

**关键点**：
- `nativeEvent` 保存原生事件对象，方便后续访问
- `stopPropagation` 方法标记 `_stopPropagation` 为 `true`，用于控制事件流
- 同时调用原生事件的 `stopPropagation`，确保原生事件也被阻止

### 2. 事件类型名称转换

```javascript
const getTypeName = (type) => "bind" + type[0].toUpperCase() + type.slice(1);
```

这个函数将事件类型转换为自定义名称，例如：
- `click` → `bindClick`
- `change` → `bindChange`

### 3. 触发事件流

```javascript
const triggerEventFlow = (paths, type, se) => {
  for (let index = paths.length - 1; index >= 0; index--) {
    const pathNode = paths[index];
    if (!pathNode) {
      return;
    }
    const callback = pathNode[type];
    if (callback) {
      callback.call(null, se);
    }
    if (se._stopPropagation) {
      return;
    }
  }
};
```

**流程解析**：
- 从后往前遍历路径数组（模拟冒泡）
- 找到对应类型的事件处理函数并执行
- 如果检测到 `_stopPropagation` 标记，立即停止事件流

### 4. 收集事件路径

```javascript
const collectPaths = (type, beginFiber) => {
  const paths = [];

  while (beginFiber.tag !== 3) {
    const { memoizedProps, tag } = beginFiber;
    if (tag === 5) {
      // DOM 元素
      const eventHandle = memoizedProps[type];
      paths.push({
        [type]: eventHandle,
      });
    }
    beginFiber = beginFiber.return;
  }
  return paths;
};
```

**关键点**：
- `tag === 5` 表示 DOM 元素节点
- `tag === 3` 表示根节点（HostRoot）
- 从目标 fiber 向上遍历，收集所有绑定的事件处理函数
- `memoizedProps` 中存储了组件的 props，包括事件处理函数

### 5. 事件分发

```javascript
const dispatchEvent = (e, type) => {
  // 实例化合成事件对象
  const se = new SyntheticEvent(e);
  const ele = e.target;

  // 找到目标元素的 fiber 节点
  let fiber;
  for (const prop in ele) {
    if (prop.toLocaleLowerCase().includes("fiber")) {
      fiber = ele[prop];
    }
  }

  // 收集事件路径
  const paths = collectPaths(type, fiber);

  // 模拟捕获
  triggerEventFlow(paths, type + "Capture", se);

  // 模拟冒泡
  if (!se._stopPropagation) {
    triggerEventFlow(paths.reverse(), se);
  }
};
```

**流程解析**：
1. 创建合成事件对象 `se`
2. 从 `e.target` 找到对应的 fiber 节点（DOM 元素上会有 `__reactFiber$xxx` 属性）
3. 收集从目标到根的事件处理函数路径
4. 先执行捕获阶段（`type + "Capture"`）
5. 如果没有阻止冒泡，再执行冒泡阶段（`paths.reverse()`）

### 6. 添加事件监听

```javascript
// 用于根元素绑定事件，自定义事件以 bindClick 为例
export const addEvent = (container, type) => {
  container.addEventListener(type, (e) => {
    // 事件收集
    dispatchEvent(e, getTypeName(type));
  });
};
```

**使用示例**：

```javascript
// 在根元素上绑定点击事件委托
addEvent(document.getElementById('root'), 'click');
```

## 完整流程图

```
用户点击按钮
    ↓
原生事件触发 (click)
    ↓
根元素事件委托捕获
    ↓
dispatchEvent 处理
    ↓
创建 SyntheticEvent
    ↓
找到目标 fiber 节点
    ↓
collectPaths 收集事件路径
    ↓
triggerEventFlow (捕获阶段)
    ↓
triggerEventFlow (冒泡阶段)
    ↓
执行用户定义的事件处理函数
```

## Fiber Tag 类型说明

| Tag | 类型 | 说明 |
|-----|------|------|
| 3 | HostRoot | 根节点 |
| 5 | HostComponent | DOM 元素 |
| 1 | FunctionComponent | 函数组件 |
| 2 | ClassComponent | 类组件 |

## 总结

React 合成事件的核心思想是：

1. **事件委托**：将所有事件绑定到根元素，减少内存占用
2. **事件收集**：通过 fiber 树向上遍历，收集所有事件处理函数
3. **模拟事件流**：按照捕获 → 冒泡的顺序执行事件处理函数
4. **合成事件对象**：包装原生事件，提供统一的 API

这种设计使得 React 能够高效地管理事件，同时保持与原生事件行为的兼容性。

---

> **参考**：React 源码中的事件系统实现，理解 fiber 树结构和事件委托机制是掌握 React 事件处理的关键。

了解 React 合成事件的原理以及实现机制

React 合成事件原理以及实现


# Hook 的原理以及实现

## hook 内部介绍
不同状态下对应的hook 函数调用也是不同的

- HookDispatcherOnMount 负责 初始化阶段
mount 阶段： 函数组件进行初始化，调用的是 mountXXX对应的函数

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:mountCallback,
  useEffect:mountEffect,
  useMemo:mountMemo,
  useReducer:mountReducer,
  useRef:mountRef,
  useState:mountState,
};
```

- HooksDispatcherOnUpdate 负责更新阶段
update 阶段： 函数组件进行更新，调用的是 updateXXX对应的函数

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:mountCallback,
  useEffect:mountEffect,
  useMemo:mountMemo,
  useReducer:mountReducer,
  useRef:mountRef,
  useState:mountState,
};
```

- ContextOnlyDispatcher 负责上下文只读操作
  - 其他情况（报错）： 调用的是 throwXXX

```javascript
const HookDispatcherOnMount = DisPatcher = {
  rendContext,
  useCallback:throwCallback,
  useEffect:throwEffect,
  useMemo:throwMemo,
  useReducer:throwReducer,
  useRef:throwRef,
  useState:throwState,
};
```

当FC 进入render 流程的时候会判断出是渲染还是更新

```javascript
  if(current !== null && current.memoizedState !== null) {
    // 更新阶段
    ReactCurrentDIspatcher.current = HooksDispatcherOnUpdate;
  } else {
    // 初始化阶段
    ReactCurrentDIspatcher.current = HookDispatcherOnMount;
  }
```

hook 的数据结构

````javascript
const hook = {
  memoizedState: null,
  baseState: null,
  baseQueue: null,
  queue: null,
  next: null,
}
```


> 注意 memoizedState 字段 ， 在fiberNode 上也有这个阶段，与Hook 对象上存储的东西不一样
>
> - FiberNode.memoizedState 保存的时候Hook 链表中第一个链表
> - Hook 对象上存储的是某个hook 的状态








了解 React Hook 的原理以及实现机制

React Hook 原理以及实现


# React

## JSX 与 UI 描述

React 使用 JSX 描述 UI。JSX 是类似 XML 的 JavaScript 语法扩展，经过 Babel 编译后，在 React 17 之前通常转换为 `React.createElement` 调用，React 17 之后可转换为 `react/jsx-runtime` 中的 `jsx` 调用。代码执行后得到的对象就是 React 元素。

React 的设计观点是 UI 与逻辑存在耦合，使用 JavaScript 同时表达 UI 和逻辑，可以让二者保持紧密关联。原笔记将 React 归为应用级框架。

## 虚拟 DOM

虚拟 DOM 是一种编程概念，在 JavaScript 中用对象描述 UI 层级。React 中 JSX 会生成 React 元素，原笔记也将其称为虚拟 DOM。

虚拟 DOM 的价值包括：在 JavaScript 层计算差异并尽量减少真实 DOM 修改，以及为不同宿主环境提供抽象。浏览器可使用 React DOM，原生环境可使用 React Native，Canvas、SVG 或 VML 宿主环境可使用 React ART，测试环境则可以渲染为 JavaScript 对象。

## 从 Stack 到 Fiber

React 15 之前的 Stack 架构包含协调器和渲染器。协调器通过递归执行挂载和更新，一旦开始便无法中断。大量差异计算可能长期占用 JavaScript 线程，导致页面卡顿；更新任务也没有优先级，输入等紧急任务可能被延迟。

React 16 引入 Fiber。Fiber 同时表示一种架构、一种数据结构和一个动态工作单元。每个 FiberNode 本质上是 JavaScript 对象，保存 React 元素类型、相邻 FiberNode、DOM 信息、本次更新数据、待执行工作和增删改等副作用信息。FiberNode 通过链表关联，使任务能够被拆分和调度。

## 双缓冲

React 同时维护两棵 Fiber 树：一棵对应当前真实 UI，另一棵在内存中构建下一次更新。新树构建完成后，二者交换角色，这一机制与显卡的前后缓冲区类似。

## 渲染流程

React 更新分为 Render 和 Commit 两个阶段。

Render 阶段可以中断，包含调度器和协调器：调度器为任务分配优先级，使紧急任务可以优先执行；协调器使用深度优先遍历创建并串联 FiberNode。向下的“递”阶段执行 `beginWork` 创建子 FiberNode，向上的“归”阶段执行 `completeWork` 并收集副作用。

Commit 阶段不可中断，由渲染器将副作用应用到宿主环境，分为三个子阶段：

- Before Mutation：执行 DOM 变更前的操作，类组件中包含 `getSnapshotBeforeUpdate`。
- Mutation：执行 DOM 插入、移动、更新和删除，同时处理卸载、ref 和 effect 清理。
- Layout：类组件中执行 `componentDidMount/componentDidUpdate`，函数组件中执行 `useLayoutEffect` 回调。

## Diff 与 key

协调过程中，单节点场景主要比较 `key` 和元素类型；两者相同可以复用，只匹配其一时可能删除旧节点并创建新 Fiber。多节点场景先按顺序遍历：`key` 和类型相同则复用，`key` 相同但类型不同则创建新 Fiber 并记录删除，二者都不同则结束第一轮。剩余节点再根据新旧列表情况执行删除、新增或通过 Map 查找可复用节点并移动。

原笔记中“React 和 Vue 的 key 区别”只有占位标题，没有有效内容，本整理不扩写。

## 事件系统

React 有自己的事件系统。`SyntheticEvent` 对浏览器原生事件进行封装，提供相近的 API 并兼容主流浏览器。React 还基于事件委托和 Fiber 树模拟捕获、冒泡过程，为不同事件设置优先级，并统一使用 `onXxx` 驼峰形式绑定事件。

## Hooks

原笔记记录了三种 Hooks dispatcher：`HooksDispatcherOnMount` 负责初始化并把信息挂到 FiberNode；`HooksDispatcherOnUpdate` 负责更新；`ContextOnlyDispatcher` 用于阻止开发者在函数组件外调用 Hook。

同一函数组件的 Hooks 通过链表保存。Hook 节点包含 `memoizedState`、`baseState`、`baseQueue`、`queue` 和 `next`。`useState`、`useReducer` 保存状态，`useRef` 保存 `{ current }`，`useEffect`、`useMemo`、`useCallback` 保存回调和依赖；`useContext` 不需要通过 `memoizedState` 保存数据。

原笔记列出的触发更新入口包括 `createRoot`、`setState`、`forceUpdate`、`useState` dispatcher 和 `useReducer` dispatcher。更新数据带有优先级，高优先级更新可以中断低优先级更新。

## 组件能力

原笔记列出了生命周期、父子组件通信、Redux、高阶组件和 Hooks 相对 Class 组件的优势等主题。Redux 被描述为集中管理状态，由 action 描述变化，reducer 根据旧状态和 action 生成新状态，store 负责保存状态并通知订阅者。高阶组件是接收组件并返回增强组件的函数，用于复用横切逻辑。


整理 React JSX、虚拟 DOM、Fiber、渲染流程、事件系统和 Hooks 等核心原理。

React学习笔记

React 合成事件原理以及实现

React Hook 原理以及实现

React 核心原理笔记