{"_id":"react-illustration-series","_rev":"2-e6209e7b44cccef9b905cddb5fa60d78","name":"react-illustration-series","description":"react-illustration-series","dist-tags":{"latest":"3.7.2"},"versions":{"2.3.8":{"name":"react-illustration-series","version":"2.3.8","keywords":["react"],"author":{"name":"7kms"},"license":"MIT","_id":"react-illustration-series@2.3.8","maintainers":[{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"}],"homepage":"https://github.com/7kms","bugs":{"url":"https://github.com/7kms/react-illustration-series/issues"},"dist":{"shasum":"7f22fff49f65d9c45c7afc87d81cc5c5e7a737d6","tarball":"https://registry.npmjs.org/react-illustration-series/-/react-illustration-series-2.3.8.tgz","fileCount":31,"integrity":"sha512-SytlY8J80vmvkUaomCkVEFkq4urEEYT8lRUksdA5p6rPewJTTzwWCEOFArxPypq0AczMUqoqouG+4Zdp7SbwDw==","signatures":[{"sig":"MEYCIQDG//gI6gjYAewCEMBiV21YpHUPQnymrDOdVWUc1x3Z6AIhAJ5Dv7xpUWB0q9MZmy7VWi6xpstlZdVvdijUBNQgR9Mi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39331},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","scripts":{"build":"tsup"},"_npmUser":{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"},"repository":{"url":"git+https://github.com/7kms/react-illustration-series.git","type":"git"},"_npmVersion":"9.6.7","description":"react-illustration-series","directories":{},"_nodeVersion":"18.17.1","dependencies":{"jas-berth":"^2.3.6","mic-casasync":"^2.9.4","mel-brain-tech":"^3.3.4","chr-computer-native":"^2.3.8"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","typescript":"^5.3.3"},"_npmOperationalInternal":{"tmp":"tmp/react-illustration-series_2.3.8_1720442165181_0.1491173313443832","host":"s3://npm-registry-packages"}},"2.7.2":{"name":"react-illustration-series","version":"2.7.2","keywords":["react"],"author":{"name":"7kms"},"license":"MIT","_id":"react-illustration-series@2.7.2","maintainers":[{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"}],"homepage":"https://github.com/7kms","bugs":{"url":"https://github.com/7kms/react-illustration-series/issues"},"dist":{"shasum":"92cd45b9027daebc238fb63f647716bb817e25cc","tarball":"https://registry.npmjs.org/react-illustration-series/-/react-illustration-series-2.7.2.tgz","fileCount":31,"integrity":"sha512-UD06z9PIyVeXiT5fsEF6So8jL6FTnds00vzFEr4P1RulsoNlT96QrI0kdevzZBNxyF3FzNs0bp4dzgbMnqcHpg==","signatures":[{"sig":"MEYCIQCRay2MKZbJgm3SFJThP8JqOATwzQZimdm2ZJsKRloCLQIhAN6hXVREv/wjXOt2dKYaF+TSOrirK0FODVsWnktmkGaq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":39453},"main":"./dist/index.js","types":"./dist/index.d.ts","module":"./dist/index.mjs","scripts":{"build":"tsup"},"_npmUser":{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"},"repository":{"url":"git+https://github.com/7kms/react-illustration-series.git","type":"git"},"_npmVersion":"9.6.7","description":"react-illustration-series","directories":{},"_nodeVersion":"18.17.1","dependencies":{"jas-berth":"^2.3.6","mic-casasync":"^2.9.4","mel-brain-tech":"^3.3.4","chr-computer-native":"^2.3.8"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","typescript":"^5.3.3"},"_npmOperationalInternal":{"tmp":"tmp/react-illustration-series_2.7.2_1720442263562_0.16626709116085459","host":"s3://npm-registry-packages"}},"3.7.2":{"name":"react-illustration-series","description":"react-illustration-series","version":"3.7.2","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","homepage":"https://github.com/7kms","dependencies":{"jas-berth":"^2.3.6","mel-brain-tech":"^3.3.4","mic-casasync":"^2.9.4","chr-computer-native":"^2.3.8"},"repository":{"type":"git","url":"git+https://github.com/7kms/react-illustration-series.git"},"scripts":{"build":"tsup"},"keywords":["react"],"author":{"name":"7kms"},"license":"MIT","devDependencies":{"tsup":"^8.0.2","typescript":"^5.3.3"},"bugs":{"url":"https://github.com/7kms/react-illustration-series/issues"},"_id":"react-illustration-series@3.7.2","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-9pHkjU3QjGrm21iOEYtG6tyDtmC9j2rJwIDL6eZEnlfn/IlxmwxdkgUqDMEbKkRSkwqXJWwD0UeJY4eDnHcWIQ==","shasum":"63857e9e4719ec1745b558da95def8e48ed2e1b8","tarball":"https://registry.npmjs.org/react-illustration-series/-/react-illustration-series-3.7.2.tgz","fileCount":31,"unpackedSize":39453,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtMN91nnUUEEaH7oRTbdDmpXk4W3RsPVJ+dhWatZGwYQIgMfPvPp+lRoqspdgE8zCFIh2y2zaM7VVT4KfAj5Q7rAg="}]},"_npmUser":{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"},"directories":{},"maintainers":[{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-illustration-series_3.7.2_1720442272092_0.7695801204615469"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-08T12:36:05.180Z","modified":"2024-07-08T12:37:52.470Z","2.3.8":"2024-07-08T12:36:05.371Z","2.7.2":"2024-07-08T12:37:43.731Z","3.7.2":"2024-07-08T12:37:52.324Z"},"maintainers":[{"name":"angelyngoemanbsbc6673","email":"angelyngoemanbsbc6673@gmail.com"}],"author":{"name":"7kms"},"repository":{"type":"git","url":"git+https://github.com/7kms/react-illustration-series.git"},"keywords":["react"],"license":"MIT","homepage":"https://github.com/7kms","bugs":{"url":"https://github.com/7kms/react-illustration-series/issues"},"readme":"# 图解 React 源码系列\r\n\r\n> `react`源码, 基于[`react@17.0.2`](https://github.com/facebook/react/tree/v17.0.2)(尽可能跟随 react 版本的升级, 持续更新). 用大量配图的方式, 致力于将`react`原理表述清楚.\r\n\r\n## 使用指南\r\n\r\n1. 本系列以 react 核心包结构和运行机制为主线索进行展开. 包括`react 宏观结构`, `react 工作循环`, `react 启动模式`, `react fiber原理`, `react hook原理`, `react 合成事件`等核心内容.\r\n2. 开源作品需要社区的净化和参与, 如有表述不清晰或表述错误, 欢迎[issue 勘误](https://github.com/7kms/react-illustration-series/issues). 如果对你有帮助, 请不吝 star.\r\n3. 本系列最初写作于 2020 年 6 月(当时稳定版本是 v16.13.1), 随着 react 官方的升级, 本 repo 会将主要版本的文章保存在以版本号命名的分支中.\r\n4. 当下前端技术圈总体比较浮躁, 各技术平台充斥着不少\"标题党\". 真正对于技术本身, 不能急于求成, 需要静下心来修炼.\r\n5. 本系列不是面经, 但会列举一些面试题来加深对 react 理解.\r\n6. 本系列所有内容皆为原创, 如需转载, 请注明出处.\r\n\r\n## 适用读者\r\n\r\n1. 对`react`,`react-dom`开发 web 应用有实践经验.\r\n2. 期望深入理解`react`内在作用原理.\r\n\r\n---\r\n\r\n## 版本跟踪\r\n\r\n> 本系列暂时只跟踪稳定版本的变动. `react`仓库代码改动比较频繁, 在写作过程中, 如果伴随小版本的发布, 文章中的源码链接会以写作当天的`最新小版本`为基准.\r\n\r\n- [`react@17.0.0`](https://github.com/facebook/react/releases/tag/v17.0.0)作为主版本升级, 相较于 16.x 版本, 在使用层面基本维持不变, 在源码层面需要关注的重大的变动如下\r\n\r\n  | 重大变动                                                      | 所属板块                                    | 官方解释                                                                                                      |\r\n  | ------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |\r\n  | 重构`Fiber.expirationTime`并引入`Fiber.lanes`                 | `react-reconciler`                          | [Initial Lanes implementation #18796](https://github.com/facebook/react/pull/18796)                           |\r\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) |\r\n\r\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 内部的执行性能.\r\n\r\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).\r\n\r\n## 主要内容\r\n\r\n### 基本概念\r\n\r\n- [宏观包结构](./docs/main/macro-structure.md)\r\n- [两大工作循环](./docs/main/workloop.md)\r\n- [高频对象](./docs/main/object-structure.md)\r\n\r\n### 运行核心\r\n\r\n- [reconciler 运作流程](./docs/main/reconciler-workflow.md)\r\n- [启动过程](./docs/main/bootstrap.md)\r\n- [优先级管理](./docs/main/priority.md)\r\n- [scheduler 调度原理](./docs/main/scheduler.md)\r\n- [fiber 树构造(基础准备)](./docs/main/fibertree-prepare.md)\r\n- [fiber 树构造(初次创建)](./docs/main/fibertree-create.md)\r\n- [fiber 树构造(对比更新)](./docs/main/fibertree-update.md)\r\n- [fiber 树渲染](./docs/main/fibertree-commit.md)\r\n- 异常处理\r\n\r\n### 数据管理\r\n\r\n- [状态与副作用](./docs/main/state-effects.md)\r\n- [hook 原理(概览)](./docs/main/hook-summary.md)\r\n- [hook 原理(状态 Hook)](./docs/main/hook-state.md)\r\n- [hook 原理(副作用 Hook)](./docs/main/hook-effect.md)\r\n- [context 原理](./docs/main/context.md)\r\n\r\n### 交互\r\n\r\n- [合成事件原理](./docs/main/synthetic-event.md)\r\n\r\n### 高频算法\r\n\r\n- [位运算](./docs/algorithm/bitfield.md)\r\n- [堆排序](./docs/algorithm/heapsort.md)\r\n- [深度优先遍历](./docs/algorithm/dfs.md)\r\n- [链表操作](./docs/algorithm/linkedlist.md)\r\n- [栈操作](./docs/algorithm/stack.md)\r\n- [diff 算法](./docs/algorithm/diff.md)\r\n\r\n## 历史版本\r\n\r\n- [基于 v16.13.1 版本的分析](https://github.com/7kms/react-illustration-series/tree/v16.13.1)\r\n- [基于 v17.0.1 版本的分析](https://github.com/7kms/react-illustration-series/tree/v17.0.1)\r\n","readmeFilename":"README.md"}