{"id":13493078,"url":"https://github.com/neroneroffy/react-source-code-debug","last_synced_at":"2025-05-16T11:07:02.247Z","repository":{"id":37623724,"uuid":"275791853","full_name":"neroneroffy/react-source-code-debug","owner":"neroneroffy","description":"React 源码调试环境，源代码详细注释，跟随官方仓库进行更新","archived":false,"fork":false,"pushed_at":"2024-08-23T03:08:27.000Z","size":20062,"stargazers_count":908,"open_issues_count":15,"forks_count":164,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-09T05:06:13.985Z","etag":null,"topics":["fiber","hooks","lane","react","scheduler"],"latest_commit_sha":null,"homepage":"https://segmentfault.com/blog/react-secret?_ea=103006355","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/neroneroffy.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":"2020-06-29T11:20:03.000Z","updated_at":"2025-04-02T11:45:51.000Z","dependencies_parsed_at":"2024-10-31T07:41:34.113Z","dependency_job_id":null,"html_url":"https://github.com/neroneroffy/react-source-code-debug","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/neroneroffy%2Freact-source-code-debug","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neroneroffy%2Freact-source-code-debug/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neroneroffy%2Freact-source-code-debug/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neroneroffy%2Freact-source-code-debug/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neroneroffy","download_url":"https://codeload.github.com/neroneroffy/react-source-code-debug/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254518383,"owners_count":22084374,"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":["fiber","hooks","lane","react","scheduler"],"created_at":"2024-07-31T19:01:11.981Z","updated_at":"2025-05-16T11:06:57.232Z","avatar_url":"https://github.com/neroneroffy.png","language":"JavaScript","readme":"# React的秘密\n本仓库是我在阅读React源码过程中搭建的调试环境，学习过程中对源码添加了较为详细的注释，并记录了一些我自己的理解与思考，输出了十几篇文章。React的源码庞大且复杂，希望这个仓库可以帮助到学习源码的你，本仓库会中的源码会随官方发布的主要版本进行更新。\n\n*可clone本仓库到本地直接运行，快速获取源码调试环境，或者 [点击查看](https://github.com/neroneroffy/react-source-code-debug/tree/master/docs/setUpDebugEnv.md) 调试环境搭建教程*\n\n## 安装依赖\nnpm install\n\n## 启动React不同版本的调试环境：\n* 启动18.3.1，该版本源码获取自2024年4月26日官方发布的18.3.1版本\n```\n npm run dev:18.3.1\n```\n* 启动18，该版本代码获取自2022年6月2日下午3点14分React官方仓库的main分支\n```\n npm run dev:18\n```\n* 启动17正式版\n```\n npm run dev:17\n```\n* 启动17.0.0-alpha.0\n```\n npm run dev:17.0.0-alpha.0\n```\n* 启动16.13.1版本\n```\n npm run dev:16.13.1\n```\n* 启动16.12.0版本\n```\nnpm run dev:16.12.0\n```\n* 查看Lanes优先级模型的效果（除react、react-dom之外，其他包例如 scheduler、react-reconciler等引入自master分支的代码）\n\n*在此感谢[yisar](https://github.com/yisar)提供Lanes模型的源码包*\n\n由于Lanes还未正式发布，master分支代码虽然开启concurrent模式之后优先级用的就是lanes，但它只是将expirationTime替换成了lanes去实现，\n效果并无变化，真正的效果可以使用下边命令预览，启动命令之前需要将config/env.js 中的__PROFILE__环境变量置为true\n```\nnpm run dev:lanes\n```\n\n# React源码解析系列文章目录\nReact源码体系较为复杂，在了解了整体流程之后，我编排的内容顺序如下。\n\n## 前置知识\n有一些知识需要了解，因为React17的优先级模型由expirationTime换成了Lanes模型，而Lanes模型涉及大量的位运算，所以需要先了解位运算。另外，贯穿React更新完整周期的优先级机制也是绕不开的话题。\n* [基础概念](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/%E6%A6%82%E8%BF%B0.md)\n* [位运算](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86/%E4%BD%8D%E8%BF%90%E7%AE%97.md)\n* [React中的优先级](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86/React%E4%B8%AD%E7%9A%84%E4%BC%98%E5%85%88%E7%BA%A7.md)\n\n## Render阶段\n产生更新后，React会渲染一棵离屏Fiber树（workInProgress树），Render阶段正是这棵Fiber树的构建阶段。构建过程分为深度优先的向下beginWork阶段，以及触碰到叶子节点之后的向上completeWork回溯阶段。在Concurrent模式下，Render阶段是可以被打断的。\n### beginWork阶段\n  * [beginWork阶段概述](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/render%E9%98%B6%E6%AE%B5/beginWork%E9%98%B6%E6%AE%B5/beginWork.md)\n  * [扒一扒React的state计算原理](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/render%E9%98%B6%E6%AE%B5/beginWork%E9%98%B6%E6%AE%B5/%E5%A4%84%E7%90%86%E6%9B%B4%E6%96%B0.md)\n  * [深入理解Diff算法](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/render%E9%98%B6%E6%AE%B5/beginWork%E9%98%B6%E6%AE%B5/Diff%E7%AE%97%E6%B3%95.md)\n### completeWork阶段\n  * [React的completeWork：承上启下 \u0026 错误处理](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/render%E9%98%B6%E6%AE%B5/completeWork/completeWork.md)\n\n## Commit阶段\n在Render阶段完成后，离屏的Fiber树构建完成，此时需要进行实际的DOM操作，来将更新应用到DOM上。除此之外，还会有use(Layout)Effect这类Hook函数的处理。\n* [React Commit阶段都做了什么](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/commit%E9%98%B6%E6%AE%B5/%E6%A6%82%E8%A7%88.md)\n### DOM操作系列：\n下面的三面文章，可以帮助你深入理解Commit阶段React操作DOM的细节。\n* [节点插入算法](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/commit%E9%98%B6%E6%AE%B5/mutation/%E8%8A%82%E7%82%B9%E6%8F%92%E5%85%A5.md)\n* [节点删除算法](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/commit%E9%98%B6%E6%AE%B5/mutation/%E8%8A%82%E7%82%B9%E5%88%A0%E9%99%A4.md)\n* [节点更新](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/commit%E9%98%B6%E6%AE%B5/mutation/%E8%8A%82%E7%82%B9%E6%9B%B4%E6%96%B0.md)\n\n## 其余核心功能\n以上是主流程，其余的重要功能不容忽视，例如React事件机制，还有Concurrent模式下的任务调度机制，都值得深入研究。\n* [React中的事件机制](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/%E4%BA%8B%E4%BB%B6%E7%B3%BB%E7%BB%9F/%E6%A6%82%E8%A7%88.md)\n* [一篇文章搞懂React的任务调度机制](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/%E8%B0%83%E5%BA%A6%E6%9C%BA%E5%88%B6/Scheduler.md)\n* Context原理酝酿中...\n\n## Hooks\nHooks作为革命性的新功能，必然要深入学习，下面的文章从基本的hooks链表开始，展开讲解各个Hooks的原理\n* [React hooks 的基础概念：hooks链表](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/Hooks/%E6%A6%82%E8%BF%B0.md)\n* [梳理useEffect和useLayoutEffect的原理与区别](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/Hooks/UseEffectUseLayoutEffect.md)\n* 更多Hooks文章酝酿中...\n\n## Concurrent模式下React的更新行为\n下面三篇文章通过梳理Concurrent模式下React任务的更新行为，总结了上面所有文章的重要知识点，其中**高优先级任务插队**这篇文章涉及React中重要的多任务协调机制，内容不容错过。\n* [概述](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/Concurrent%E6%A8%A1%E5%BC%8F%E4%B8%8BReact%E7%9A%84%E6%9B%B4%E6%96%B0%E8%A1%8C%E4%B8%BA/%E6%A6%82%E8%BF%B0.md)\n* [高优先级任务插队](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/Concurrent%E6%A8%A1%E5%BC%8F%E4%B8%8BReact%E7%9A%84%E6%9B%B4%E6%96%B0%E8%A1%8C%E4%B8%BA/%E9%AB%98%E4%BC%98%E5%85%88%E7%BA%A7%E4%BB%BB%E5%8A%A1%E6%8F%92%E9%98%9F.md)\n* [任务饥饿问题](https://github.com/neroneroffy/react-source-code-debug/blob/master/docs/Concurrent%E6%A8%A1%E5%BC%8F%E4%B8%8BReact%E7%9A%84%E6%9B%B4%E6%96%B0%E8%A1%8C%E4%B8%BA/%E9%A5%A5%E9%A5%BF%E9%97%AE%E9%A2%98.md)\n\n\n本系列文章在之后会继续更新未完成的部分，会同步发到我的[个人网站](https://www.neroht.com/) 以及segmentFault专栏 [React的秘密](https://segmentfault.com/blog/react-secret?_ea=101930838) 上。\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneroneroffy%2Freact-source-code-debug","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneroneroffy%2Freact-source-code-debug","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneroneroffy%2Freact-source-code-debug/lists"}