my-react

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 73 Open GitHub ↗

手写 React 18 源码，带你从零实现 React 的核心功能，构建自己的 React 库。

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<a href="https://2xiao.github.io/my-react" target="_blank"><img src="https://2xiao.github.io/leetcode-js/assets/image/react-logo.png" alt="logo" height="360"/></a>

《手写 React 源码》
深入理解 React 源码，手把手带你构建自己的 React 库。

---

### 目录

- [1. 项目框架搭建](https://2xiao.github.io/my-react/1)
- [2. 实现 JSX](https://2xiao.github.io/my-react/2)
- [3. 实现 Reconciler](https://2xiao.github.io/my-react/3)
- [4. 实现更新机制](https://2xiao.github.io/my-react/4)
- [5. 实现 Render 阶段](https://2xiao.github.io/my-react/5)
- [6. 实现 Commit 阶段](https://2xiao.github.io/my-react/6)
- [7. 实现 ReactDOM](https://2xiao.github.io/my-react/7)
- [8. 实现 useState](https://2xiao.github.io/my-react/8)
- [9. 接入测试框架](https://2xiao.github.io/my-react/9)
- [10. 实现单节点 update](https://2xiao.github.io/my-react/10)
- [11. 实现事件系统](https://2xiao.github.io/my-react/11)
- [12. 实现 Diff 算法](https://2xiao.github.io/my-react/12)
- [13. 实现 Fragment](https://2xiao.github.io/my-react/13)
- [14. 实现同步调度流程](https://2xiao.github.io/my-react/14)
- [15. 实现 useEffect](https://2xiao.github.io/my-react/15)
- [16. 实现 Noop Renderer](https://2xiao.github.io/my-react/16)

---

### 代码

教程地址：[https://2xiao.github.io/my-react](https://2xiao.github.io/my-react)

源代码地址：[https://github.com/2xiao/my-react](https://github.com/2xiao/my-react)

使用 Git Tag 划分迭代步骤，手把手带你实现 React v18 的核心功能。

欢迎「Star ⭐️ 」 和 「Fork」，这是对我最大的鼓励和支持。

---

### 特色

- 教程详细，带你构建自己的 React 库；

- 功能全面，可跑通官方测试用例数量：34；

- 按 Git Tag 划分迭代步骤，记录每个功能的实现过程；

---

### 你将收获

React 是由卓越工程师们在数年时间内精心打造的库，其中必定蕴含了许多值得借鉴的经验和智慧。

如果你渴望更进一步，不仅仅停留在 API 的使用层面，而是追求更深入前端技术的探索，那么掌握 React 源码将成为你技能提升的极佳途径。

本书遵循 React 源码的核心思想，通俗易懂的解析 React 源码，带你从零实现 React v18 的核心功能，学完本书，你将有这些收获：

- **面试加分**：框架底层原理是面试必问环节，熟悉 React 源码会为你的面试加分，也会为你拿下 offer 增加不少筹码；
- **提升开发效率**：熟悉 React 源码之后，会对 React 的运行流程有新的认识，让你在日常的开发中，对性能优化、使用技巧和 bug 解决更加得心应手；
- **巩固基础知识**：学习本书也顺便巩固了数据结构和算法，如 reconciler 中使用了 fiber、update、链表等数据结构，diff 算法要考虑怎样降低对比复杂度；

---

本书是基于 [《从 0 实现 React18》](https://qux.xet.tech/s/2wiFh1) 整理创作的，视频教程的作者是 [@卡颂](https://github.com/BetaSu/) 。

本作品采用 知识署名-非商业性使用-禁止演绎 （BY-NC-ND） 4.0 国际许可 [协议](https://creativecommons.org/licenses/by-nc-nd/4.0/legalcode.zh-Hans) 进行许可。

只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。

[开始阅读 ->](https://2xiao.github.io/my-react/1)

my-react

Today's picks

Was this content helpful?

Recent Feedback

my-react

Today's picks

Was this content helpful?

Recent Feedback

Download README