{"id":13559750,"url":"https://github.com/lizuncong/mini-react","last_synced_at":"2025-04-03T15:31:04.929Z","repository":{"id":37640081,"uuid":"356872799","full_name":"lizuncong/mini-react","owner":"lizuncong","description":"手写react、react-dom、react reconciler主流程源码，加深对react源码的理解。包括fiber，合成事件，hooks实现原理，dom diff，reconciliation，scheduler等","archived":false,"fork":false,"pushed_at":"2024-09-09T10:14:09.000Z","size":49638,"stargazers_count":529,"open_issues_count":27,"forks_count":79,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-04T11:38:41.404Z","etag":null,"topics":["dom-diff","fiber","react","reactsourcecode","setstate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lizuncong.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-11T13:18:07.000Z","updated_at":"2024-11-01T09:08:30.000Z","dependencies_parsed_at":"2024-11-04T11:41:57.992Z","dependency_job_id":null,"html_url":"https://github.com/lizuncong/mini-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizuncong%2Fmini-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizuncong%2Fmini-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizuncong%2Fmini-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lizuncong%2Fmini-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lizuncong","download_url":"https://codeload.github.com/lizuncong/mini-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247027781,"owners_count":20871589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dom-diff","fiber","react","reactsourcecode","setstate"],"created_at":"2024-08-01T13:00:32.512Z","updated_at":"2025-04-03T15:30:59.915Z","avatar_url":"https://github.com/lizuncong.png","language":"JavaScript","readme":"![Issues](https://img.shields.io/github/issues/lizuncong/mini-react)\n![Forks](https://img.shields.io/github/forks/lizuncong/mini-react)\n![Stars](https://img.shields.io/github/stars/lizuncong/mini-react)\n\n\u003e 如果对 react 源码感兴趣的朋友，可以从下面的 TODO 待办项中找一项，以此为发力点解析 React 源码。如果有什么好的外文需要翻译，也可以加到 TODO 中。或者觉得什么文章好，也欢迎提 PR 收录进来。希望能一起对文章质量把关，一起共建社区最好的 react 源码生态环境。\n\n### 目录划分\n\n- docs。react 相关知识文档\u0026源码剖析目录\n- react。手写 react 源码目录，对应的官方 react 版本为 17.0.1\n- react-dom。手写 react-dom 源码目录，对应的官方 react-dom 版本为 17.0.1\n- react-reconciler。手写 react-reconciler 源码目录，对应的官方 react-reconciler 版本为 17.0.1\n\n### React 源码系列文档(基于 React17.0.1 版本)\n\n- [提高 React 源码 debug 体验舒适度的一些奇淫技巧](https://github.com/lizuncong/mini-react/blob/master/docs/how_to_debug_react_source_code.md)\n\n- React 工作原理\n\n  对理解 react 工作原理有很大的启发作用\n\n  - [手把手开发极简 Fiber 版本的 React](https://github.com/lizuncong/mini-react/blob/master/docs/%E8%AF%91%E6%96%87/build_your_own_react.md)\n  - [Fiber 内部：React 中新的协调算法的深入概述](https://github.com/lizuncong/mini-react/blob/master/docs/%E8%AF%91%E6%96%87/in-depth_overview_of_the_new_reconciliation_algorithm.md)\n  - [React 中 state 和 props 更新的深入讲解](https://github.com/lizuncong/mini-react/blob/master/docs/%E8%AF%91%E6%96%87/in-depth-explanation-of-state-and-props-update-in-react.md)\n  - [React 是如何防止 XSS 攻击的，论$$typeof 的作用](https://github.com/lizuncong/mini-react/blob/master/docs/%E8%AF%91%E6%96%87/how_to_prevent_xss.md)\n  - [【TODO】类组件和函数组件最大的区别](https://github.com/lizuncong/mini-react/blob/master/docs/%E8%AF%91%E6%96%87/function_component_class_component_difference.md)\n  - [【TODO】组件名称首字母为啥一定要大写](https://github.com/lizuncong/mini-react/blob/master/docs/%E8%AF%91%E6%96%87/component-identifiers-must-be-capitalized-in-react.md)\n  - [深入概述 React 初次渲染及状态更新主流程](https://github.com/lizuncong/mini-react/blob/master/docs/render/%E6%B7%B1%E5%85%A5%E6%A6%82%E8%BF%B0%20React%E5%88%9D%E6%AC%A1%E6%B8%B2%E6%9F%93%E5%8F%8A%E7%8A%B6%E6%80%81%E6%9B%B4%E6%96%B0%E4%B8%BB%E6%B5%81%E7%A8%8B.md)\n\n  - [React17 与 React18 源码之间的差别](https://github.com/lizuncong/mini-react/blob/master/docs/React17%E4%B8%8EReact18%E6%BA%90%E7%A0%81%E4%B9%8B%E9%97%B4%E7%9A%84%E5%B7%AE%E5%BC%82.md)\n\n- React 合成事件原理\n\n  - [JavaScript 事件基础](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6/JavaScript%E4%BA%8B%E4%BB%B6%E5%9F%BA%E7%A1%80.md)\n  - [React 合成事件与原生事件的执行顺序，React17 以后合成事件有哪些变更](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6/react%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6%E4%B8%8E%E5%8E%9F%E7%94%9F%E4%BA%8B%E4%BB%B6%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F.md)\n  - [极简版合成事件](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6/%E4%BB%8E0%E5%88%B01%E6%A8%A1%E6%8B%9F%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6.md)\n  - [React 源码中合成事件的实现过程](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6/React%E6%BA%90%E7%A0%81%E4%B8%AD%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%AE%9E%E7%8E%B0%E8%BF%87%E7%A8%8B.md)\n  - [React 合成事件源码中浏览器兼容相关 API 收录](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6%E6%BA%90%E7%A0%81%E4%B8%AD%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E7%9B%B8%E5%85%B3%E7%9A%84API.md)\n  - [【TODO】React 如何实现 mouseenter 和 mouseleave 事件代理](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6/mouseenter_delegate.md)\n\n- Hooks\n\n  - [React.useReducer 原理及源码主流程](https://github.com/lizuncong/mini-react/blob/master/docs/hooks/how_useReducer_work.md)\n  - [从源码的角度分析 useLayoutEffect 及 useEffect 的区别](https://github.com/lizuncong/mini-react/blob/master/docs/hooks/%E4%BB%8E%E6%BA%90%E7%A0%81%E7%9A%84%E8%A7%92%E5%BA%A6%E7%90%86%E8%A7%A3useEffect%E4%BB%A5%E5%8F%8AuseLayoutEffect%E7%9A%84%E5%8C%BA%E5%88%AB.md)\n  - [彻底搞懂函数组件 hook 链表](https://github.com/lizuncong/mini-react/blob/master/docs/hooks/%E5%BD%BB%E5%BA%95%E6%90%9E%E6%87%82%E5%87%BD%E6%95%B0%E7%BB%84%E4%BB%B6hook%E9%93%BE%E8%A1%A8.md)\n\n- Class Component\n\n  - [React 批量\u0026同步更新场景](https://github.com/lizuncong/mini-react/blob/master/docs/class/setState%E5%90%8C%E6%AD%A5%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E7%9A%84%E9%97%AE%E9%A2%98.md)\n  - [Class Component setState 主流程及源码，类组件与函数组件对应的 fiber.memoizedState 的区别](https://github.com/lizuncong/mini-react/blob/master/docs/class/how_setstate_works.md)\n  - [React 批量\u0026同步更新原理及主流程源码](https://github.com/lizuncong/mini-react/blob/master/docs/hooks/how_batchedUpdates_work.md)\n\n- Reconciler\n\n  - [Dom Diff 算法简介](https://github.com/lizuncong/mini-react/blob/master/docs/reconciler/dom-diff%E7%AE%97%E6%B3%95%E7%AE%80%E4%BB%8B.md)\n  - [单节点 Dom Diff 算法简介](https://github.com/lizuncong/mini-react/blob/master/docs/reconciler/%E5%8D%95%E8%8A%82%E7%82%B9dom-diff%E7%AE%97%E6%B3%95.md)\n  - [多节点 Dom Diff 算法及 Commit 阶段节点移动插入更新删除等源码剖析](https://github.com/lizuncong/mini-react/blob/master/docs/reconciler/%E5%A4%9A%E8%8A%82%E7%82%B9dom-diff%E7%AE%97%E6%B3%95.md)\n  - [构建副作用链表算法，为什么 React 不采用数组保存具有副作用的 Fiber 节点？](https://github.com/lizuncong/mini-react/blob/master/docs/reconciler/%E6%9E%84%E5%BB%BA%E5%89%AF%E4%BD%9C%E7%94%A8%E9%93%BE%E8%A1%A8%E7%AE%97%E6%B3%95.md)\n  - [Dom diff 所有场景介绍](https://github.com/lizuncong/mini-react/blob/master/docs/reconciler/dom-diff%E6%89%80%E6%9C%89%E5%9C%BA%E6%99%AF.md)\n\n- Fiber\n\n  - [updateQueue 在不同类型的 Fiber 节点的含义](https://github.com/lizuncong/mini-react/blob/master/docs/fiber/fiber.updateQueue.md)\n  - [盘点 fiber 中常见的副作用标志 flags](https://github.com/lizuncong/mini-react/blob/master/docs/fiber/%E7%9B%98%E7%82%B9fiber%E4%B8%AD%E5%B8%B8%E8%A7%81%E7%9A%84%E5%89%AF%E4%BD%9C%E7%94%A8%E6%A0%87%E5%BF%97flags.md)\n  - [33 张图爆肝介绍 Fiber 双缓冲树机制](https://github.com/lizuncong/mini-react/blob/master/docs/fiber/fiber%E5%8F%8C%E7%BC%93%E5%86%B2%E6%A0%91.md)\n  - [Ref 原理及源码解析](./docs/ref/ref%E5%8E%9F%E7%90%86%E5%8F%8A%E6%BA%90%E7%A0%81.md)\n\n- Hydrate 服务端渲染\n\n  - [React Hydrate 原理及源码剖析](https://github.com/lizuncong/mini-react/blob/master/docs/hydrate/hydrate%E6%BA%90%E7%A0%81%E5%89%96%E6%9E%90.md)\n\n- 异常捕获\n\n  - [全网最详细的 React 异常捕获机制及源码，为什么在开发环境下，React 不使用 try catch，而是自己模拟了 try catch 的效果？](https://github.com/lizuncong/mini-react/blob/master/docs/%E5%BC%82%E5%B8%B8/React%E5%BC%82%E5%B8%B8%E6%8D%95%E8%8E%B7%E6%9C%BA%E5%88%B6%E5%8F%8A%E6%BA%90%E7%A0%81.md)\n\n- React Context 设计哲学\n\n  - [手撕 React Context 源码设计哲学](https://github.com/lizuncong/mini-react/blob/master/docs/ReactContext/context%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90.md)\n\n- React Scheduler\n\n  - 【手写 Scheduler 源码系列文章第一篇】[哪些 API 适合用于调度任务](./docs/schedule/%E5%93%AA%E4%BA%9BAPI%E9%80%82%E5%90%88%E7%94%A8%E4%BA%8E%E4%BB%BB%E5%8A%A1%E8%B0%83%E5%BA%A6.md)。介绍`requestAnimationFrame`、`requestIdleCallback`、`setTimeout`、`MessageChannel`、`MutationObserver`等基础用法及特性，看看哪些 API 会适合任务调度\n  - 【手写 Scheduler 源码系列文章第二篇】[scheduler 用法详解](./docs/schedule/scheduler%E7%94%A8%E6%B3%95%E8%AF%A6%E8%A7%A3.md)\n  - 【手写 Scheduler 源码系列文章第三篇】[scheduler 原理及源码手写](./docs/schedule/%E6%89%8B%E5%86%99scheduler%E6%BA%90%E7%A0%81.md)。介绍任务切片、时间切片原理、为什么使用 Message Channel 而不是 setTimeout 等调度任务？\n  - 【手写 Scheduler 源码系列文章第四篇】[scheduer 优先级调度原理及源码手写](./docs/schedule/%E6%89%8B%E5%86%99scheduler%E6%BA%90%E7%A0%81%E4%B9%8B%E4%BC%98%E5%85%88%E7%BA%A7.md)\n  - 【手写 Scheduler 源码系列文章第五篇】[scheduer 延迟任务原理及源码手写](./docs/schedule/%E6%89%8B%E5%86%99scheduler%E6%BA%90%E7%A0%81%E4%B9%8B%E5%BB%B6%E8%BF%9F%E4%BB%BB%E5%8A%A1.md)\n  - 【手写 Scheduler 源码系列文章终章】[scheduler 核心源码精讲](./docs/schedule/schedule%E6%A0%B8%E5%BF%83%E6%BA%90%E7%A0%81%E7%B2%BE%E8%AE%B2.md)\n\n- lane 模型\n\n  在看 lane 模型前，请先确保已经熟悉 React Scheduler 任务调度原理及用法\n\n### 参考链接\n\n- [React 作者 Dan Abramov 的博客](https://overreacted.io/)\n- [Fiber 内部：深入概述 React 中新的协调算法](https://indepth.dev/posts/1008/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react)\n- [medium.com](https://medium.com/react-in-depth)\n\n## Star History\n\n\u003ca href=\"https://star-history.com/#lizuncong/mini-react\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=lizuncong/mini-react\u0026type=Date\u0026theme=dark\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=lizuncong/mini-react\u0026type=Date\" /\u003e\n   \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=lizuncong/mini-react\u0026type=Date\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n\n### 关于作者\n\n实干家，不贩卖焦虑，不写水文不吹水。业余时间会根据兴趣看些框架源码，有时间就写写文章。有兴趣的网友可以扫码加个好友一起聊聊人生(备注 react 源码)\n\n\u003ccenter\u003e\u003cimg src=\"https://github.com/lizuncong/mini-react/blob/master/imgs/wechat-02.jpeg\" width=\"30%\"\u003e\u003c/center\u003e\n\n如果觉得写得好，点个 star 或者 follow 满足一下男人的虚荣心。心情好的话同时有点小钱，也可以请我喝个小茶开心一下。写得差的话就轻点喷，我会连夜改，真的\n\n\u003ccenter\u003e\u003cimg src=\"https://github.com/lizuncong/mini-react/blob/master/imgs/wechat-01.jpeg\" width=\"30%\"\u003e\u003c/center\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flizuncong%2Fmini-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flizuncong%2Fmini-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flizuncong%2Fmini-react/lists"}