# babel-react-demo

**Repository Path**: yanliangcode/babel-react-demo

## Basic Information

- **Project Name**: babel-react-demo
- **Description**: react 原理篇代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2025-11-14
- **Last Updated**: 2025-11-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

// vdom 结构
// 普通元素、文本元素"TEXT_ELEMENT"

```
{
  type // 类型：普通元素、文本元素"TEXT_ELEMENT"
  props: {
    otherProps: 其他 dom 属性
    children: vdom[]
  }
}
```

// fiber 树结构
// 后四个字段是 diff 算法，并形成 fiber 树时（过程中产生的复用、新增、删除标记）

```
{
  dom: 当前 fiber 节点对应的 dom
  type: 元素类型
  props: {
    otherProps: 其他 dom 属性
    children: vdom[]
  }
  alternate: currentRoot // 旧的 fiber 树
  child: null | fiber,
  parent: null | fiber,
  effectTag: "PLACEMENT", // effectTag 标记
  sibling: null | fiber, // 兄弟节点
}
```

浏览器原生 API
requestIdleCallback 实现时间切片
messageChannel 实现跨线程通信
setTimeout 降级方案

注意：
JSX→VDOM→Fiber→DOM
工作单元之间可中断
提交阶段(挂载 DOM)不可中断

缺少：
函数组件支持
状态管理 hook
dom 事件处理