%20(2).svg)
项目简介
本项目是对前端著名框架 React 核心功能实现的探索与实践。参考 Build your own React (pomb.us) 文章，实现了 React 的并发模式、Fiber 架构、虚拟 Dom 的 Diff 算法以及基本 Hook 如 useState，助力开发者深入理解 React 内部机制。
项目的主要特性和功能
- 并发模式：把渲染任务拆成多个小任务，借助
requestIdleCallback函数在浏览器空闲时执行，避免页面卡顿，提升用户体验。 - Fiber 架构：采用特殊树结构，便于中断和恢复渲染任务，降低状态维护成本。
- 虚拟 Dom 的 Diff 算法：更新虚拟 Dom 时，对比新旧节点差异，仅更新需改变的真实 Dom 节点，提高渲染效率。
- 基本 Hook - useState：实现状态管理功能，允许在函数式组件中使用状态，状态更新时重新渲染组件。
安装使用步骤
假设用户已下载本项目的源码文件，按以下步骤操作：
1. 安装依赖：在项目根目录下，打开终端，运行以下命令安装项目所需依赖。
bash
yarn install
2. 启动项目：安装完成后，运行以下命令启动项目。
bash
yarn start
3. 解析 TSX 配置：项目使用 Webpack 编译 ts 代码为 js 并自动在 HTML 里引入，相关配置在 webpack.config.js 中。同时，需在项目根目录创建 tsconfig.json 配置文件，确保 babel 解析 tsx 时使用自定义的 WeiReact.createElement 方法。具体配置如下：
json
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"module": "ES6",
"target": "ES2015",
"jsx": "react",
"jsxFactory": "WeiReact.createElement",
"allowJs": true
}
}
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】