{"id":13441079,"url":"https://github.com/7kms/react-illustration-series","last_synced_at":"2025-05-13T23:03:57.208Z","repository":{"id":37208120,"uuid":"261826424","full_name":"7kms/react-illustration-series","owner":"7kms","description":"图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.","archived":false,"fork":false,"pushed_at":"2024-03-02T06:55:06.000Z","size":32710,"stargazers_count":7738,"open_issues_count":40,"forks_count":823,"subscribers_count":81,"default_branch":"main","last_synced_at":"2025-04-30T10:37:41.135Z","etag":null,"topics":["fiber","hook","react","synthetic-events"],"latest_commit_sha":null,"homepage":"http://7km.top/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/7kms.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-05-06T17:07:35.000Z","updated_at":"2025-04-29T08:45:22.000Z","dependencies_parsed_at":"2023-02-08T17:00:52.111Z","dependency_job_id":"5976308c-e1fc-4b45-bcc3-da71fd2ccaba","html_url":"https://github.com/7kms/react-illustration-series","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/7kms%2Freact-illustration-series","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7kms%2Freact-illustration-series/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7kms%2Freact-illustration-series/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7kms%2Freact-illustration-series/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7kms","download_url":"https://codeload.github.com/7kms/react-illustration-series/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254040352,"owners_count":22004514,"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","hook","react","synthetic-events"],"created_at":"2024-07-31T03:01:29.694Z","updated_at":"2025-05-13T23:03:57.177Z","avatar_url":"https://github.com/7kms.png","language":"TypeScript","funding_links":[],"categories":["React","HarmonyOS","TypeScript","目录","Uncategorized"],"sub_categories":["Windows Manager","\u003ca id=\"article\"\u003e文章\u003c/a\u003e","Uncategorized"],"readme":"# 图解 React 源码系列\n\n\u003e `react`源码, 基于[`react@17.0.2`](https://github.com/facebook/react/tree/v17.0.2)(尽可能跟随 react 版本的升级, 持续更新). 用大量配图的方式, 致力于将`react`原理表述清楚.\n\n## 使用指南\n\n1. 本系列以 react 核心包结构和运行机制为主线索进行展开. 包括`react 宏观结构`, `react 工作循环`, `react 启动模式`, `react fiber原理`, `react hook原理`, `react 合成事件`等核心内容.\n2. 开源作品需要社区的净化和参与, 如有表述不清晰或表述错误, 欢迎[issue 勘误](https://github.com/7kms/react-illustration-series/issues). 如果对你有帮助, 请不吝 star.\n3. 本系列最初写作于 2020 年 6 月(当时稳定版本是 v16.13.1), 随着 react 官方的升级, 本 repo 会将主要版本的文章保存在以版本号命名的分支中.\n4. 当下前端技术圈总体比较浮躁, 各技术平台充斥着不少\"标题党\". 真正对于技术本身, 不能急于求成, 需要静下心来修炼.\n5. 本系列不是面经, 但会列举一些面试题来加深对 react 理解.\n6. 本系列所有内容皆为原创, 如需转载, 请注明出处.\n\n## 适用读者\n\n1. 对`react`,`react-dom`开发 web 应用有实践经验.\n2. 期望深入理解`react`内在作用原理.\n\n---\n\n## 版本跟踪\n\n\u003e 本系列暂时只跟踪稳定版本的变动. `react`仓库代码改动比较频繁, 在写作过程中, 如果伴随小版本的发布, 文章中的源码链接会以写作当天的`最新小版本`为基准.\n\n- [`react@17.0.0`](https://github.com/facebook/react/releases/tag/v17.0.0)作为主版本升级, 相较于 16.x 版本, 在使用层面基本维持不变, 在源码层面需要关注的重大的变动如下\n\n\n    | 重大变动                                                      | 所属板块                                    | 官方解释                                                                                                      |\n    | ------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\n    | 重构`Fiber.expirationTime`并引入`Fiber.lanes`                 | `react-reconciler`                          | [Initial Lanes implementation #18796](https://github.com/facebook/react/pull/18796)                           |\n    | 事件代理节点从 document 变成 rootNode, 取消合成事件的缓存池等 | `legacy-events(被移除)`, `react-dom/events` | [changes-to-event-delegation](https://reactjs.org/blog/2020/10/20/react-v17.html#changes-to-event-delegation) |\n\n- [`react@17.0.1`](https://github.com/facebook/react/releases/tag/v17.0.1)相较于主版本`v17.0.0`做了一个点的优化, [改动了 1 个文件](https://github.com/facebook/react/compare/v17.0.0...v17.0.1), 修复 ie11 兼容问题, 同时提升 v8 内部的执行性能.\n\n* [`react@17.0.2`](https://github.com/facebook/react/releases/tag/v17.0.2)相较于`v17.0.1`, 改动集中于`Scheduler`包, 主干逻辑没有变动, 只与调度[性能统计相关](https://github.com/facebook/react/compare/v17.0.1...v17.0.2).\n\n## 主要内容\n\n### 基本概念\n\n- [宏观包结构](./docs/main/macro-structure.md)\n- [两大工作循环](./docs/main/workloop.md)\n- [高频对象](./docs/main/object-structure.md)\n\n### 运行核心\n\n- [reconciler 运作流程](./docs/main/reconciler-workflow.md)\n- [启动过程](./docs/main/bootstrap.md)\n- [优先级管理](./docs/main/priority.md)\n- [scheduler 调度原理](./docs/main/scheduler.md)\n- [fiber 树构造(基础准备)](./docs/main/fibertree-prepare.md)\n- [fiber 树构造(初次创建)](./docs/main/fibertree-create.md)\n- [fiber 树构造(对比更新)](./docs/main/fibertree-update.md)\n- [fiber 树渲染](./docs/main/fibertree-commit.md)\n- 异常处理\n\n### 数据管理\n\n- [状态与副作用](./docs/main/state-effects.md)\n- [hook 原理(概览)](./docs/main/hook-summary.md)\n- [hook 原理(状态 Hook)](./docs/main/hook-state.md)\n- [hook 原理(副作用 Hook)](./docs/main/hook-effect.md)\n- [context 原理](./docs/main/context.md)\n\n### 交互\n\n- [合成事件原理](./docs/main/synthetic-event.md)\n\n### 高频算法\n\n- [位运算](./docs/algorithm/bitfield.md)\n- [堆排序](./docs/algorithm/heapsort.md)\n- [深度优先遍历](./docs/algorithm/dfs.md)\n- [链表操作](./docs/algorithm/linkedlist.md)\n- [栈操作](./docs/algorithm/stack.md)\n- [diff 算法](./docs/algorithm/diff.md)\n\n## 历史版本\n\n- [基于 v16.13.1 版本的分析](https://github.com/7kms/react-illustration-series/tree/v16.13.1)\n- [基于 v17.0.1 版本的分析](https://github.com/7kms/react-illustration-series/tree/v17.0.1)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7kms%2Freact-illustration-series","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7kms%2Freact-illustration-series","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7kms%2Freact-illustration-series/lists"}