# react-fiber

**Repository Path**: kayanchan/react-fiber

## Basic Information

- **Project Name**: react-fiber
- **Description**: react-fiber架构、虚拟dom
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-01
- **Last Updated**: 2025-09-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

该项目是一个用于演示 React Fiber 架构和虚拟 DOM 工作原理的示例代码库。它包含多个 HTML 文件和两个简化版的 React 实现：`fiber-react` 和 `tiny-react`。这些实现展示了 React 的核心机制，如虚拟 DOM 构建、差异比较（Diffing）、组件生命周期、以及 Fiber 架构的任务调度。

---

## 📁 项目结构

### 📄 HTML 演示文件
- `VirtualDOM.html`：展示虚拟 DOM 的基本概念。
- `WholeDOM-Diff.html`：展示 DOM 差异比较过程。
- `BFS.html` / `DFS.html`：展示广度优先和深度优先遍历算法。
- `Fiber - render.html` / `Fiber - commit.html`：展示 React Fiber 架构的渲染与提交阶段。
- `requestIdleCallback.html`：展示浏览器空闲回调机制。

### 📁 fiber-react
一个简化版的 React 实现，演示 Fiber 架构的核心机制：
- **任务队列**：`CreateTaskQueue`
- **Fiber 节点创建**：`CreateElement`, `createStateNode`, `getTag`
- **DOM 操作**：`createDOMElement`, `updateNodeElement`
- **协调算法**：`reconcileChildren`, `workLoop`, `performTask`, `commitAllWork`

### 📁 tiny-react
一个更早期的 React 简化实现，演示虚拟 DOM 和组件生命周期：
- **虚拟 DOM 构建**：`createElement`, `createDOMElement`
- **组件系统**：`Component`, `isFunctionComponent`, `mountComponent`
- **更新机制**：`diff`, `updateComponent`, `unmountNode`
- **生命周期方法**：`componentWillReceiveProps`, `componentWillUpdate`, `componentDidMount` 等

---

## 🚀 使用方法

### 安装依赖（仅适用于 `fiber-react` 和 `tiny-react`）

```bash
cd fiber-react
npm install

# 或者进入 tiny-react
cd ../tiny-react
npm install
```

### 启动本地开发服务器

```bash
npm run dev
```

然后访问 `http://localhost:8080` 查看示例页面。

---

## 🧪 示例代码

在 `fiber-react/src/index.js` 中可以看到一个简单的 JSX 渲染示例：

```js
const root = document.getElementById("root");
const jsx = (
  <div className="active">
    <span>Hello</span>
    <span>World</span>
  </div>
);
```

在 `tiny-react/src/index.js` 中可以找到类组件和函数组件的使用示例：

```js
class Alert extends TinyReact.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>{this.props.message}</div>;
  }
}
```

---

## 📌 特性

- ✅ 虚拟 DOM 构建与渲染
- ✅ 组件生命周期管理
- ✅ 函数组件与类组件支持
- ✅ DOM Diff 算法实现
- ✅ Fiber 架构任务调度机制
- ✅ 支持异步渲染（requestIdleCallback）

---

## 🤝 贡献指南

欢迎提交 PR 和 Issue。请确保遵循项目代码风格，并提供清晰的提交信息。

---

## 📄 许可证

该项目使用 MIT 许可证。详情请查看仓库中的 `LICENSE` 文件。