{"id":16610787,"url":"https://github.com/ddzy/react-reading-sources","last_synced_at":"2025-03-21T14:30:59.806Z","repository":{"id":55803785,"uuid":"193649434","full_name":"ddzy/react-reading-sources","owner":"ddzy","description":"The notes about reading source code of react","archived":false,"fork":false,"pushed_at":"2020-12-12T01:14:18.000Z","size":1809,"stargazers_count":41,"open_issues_count":15,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T02:03:12.388Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ddzy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-25T06:37:33.000Z","updated_at":"2025-02-08T10:25:20.000Z","dependencies_parsed_at":"2022-08-15T07:20:09.560Z","dependency_job_id":null,"html_url":"https://github.com/ddzy/react-reading-sources","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/ddzy%2Freact-reading-sources","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddzy%2Freact-reading-sources/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddzy%2Freact-reading-sources/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ddzy%2Freact-reading-sources/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ddzy","download_url":"https://codeload.github.com/ddzy/react-reading-sources/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244815097,"owners_count":20514885,"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":[],"created_at":"2024-10-12T01:32:34.470Z","updated_at":"2025-03-21T14:30:59.441Z","avatar_url":"https://github.com/ddzy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-reading-sources\r\n\r\n## Desc\r\n\r\n闲暇之时, 精心沉淀, 品一口82年拉菲, 啵一口陈年老酿, 读一首`react`源码, 不失为一大乐事~\r\n\r\n这是闲时阅读`react`源码过程中的心得、笔记, 只是单纯的个人理解~\r\n\r\n直到读源码之前, 我一直对`react`保持好奇、憧憬的态度.\r\n\r\n**何为好奇?** 仅仅一个`setState`, 就能引发整个`react`应用的更新, 仅仅一个`state`, 就能随心所欲的切换状态.\r\n\r\n**何为憧憬?** `react@16.8`的`hooks`着实很舒服, 我的毕设当中也大量使用, 那么诸如`useState`、`useEffect`是如何实现的? 又让我对`react`内部机理产生强烈憧憬.\r\n\r\n所以, 在期末考之余创建了本仓库, 旨在将自己阅读源码过程中的`心得`、`体会`记录下来. 由于`react`源码着实太过庞大和难以理解, 所以仓库笔记可能跳跃度很高, 要完成可能还要很长很长时间吧.\r\n\r\n## Toc\r\n\r\n\u003e **images**\r\n\r\n| Name                            | Link                                                 |\r\n| ------------------------------- | ---------------------------------------------------- |\r\n| 1-FiberRoot\u0026RootFiber\u0026FiberTree | [链接](./images/1-FiberRoot\u0026RootFiber\u0026FiberTree.png) |\r\n| 2-渲染帧                        | [链接](./images/2-渲染帧.png)                        |\r\n| 3-concurrent                    | [链接](./images/3-concurrent.png)                    |\r\n| 4-ReactDOM.render流程           | [链接](./images/4-ReactDOM.render流程.png)           |\r\n| 5-react的几大更新阶段           | [链接](./images/5-react的几大更新阶段.png)           |\r\n| 6-hooks是如何存储的             | [链接](./images/6-hooks是如何存储的.png)             |\r\n| 7-react16生命周期               | [链接](./images/7-react16生命周期.png)               |\r\n| 8-react组件通信方式             | [链接](./images/8-react组件通信方式.png)             |\r\n| 9-setState是同步还是异步        | [链接](./images/9-setState是同步还是异步.png)        |\r\n\r\n\u003e **visio**\r\n\r\n| Name                            | Link                                                 |\r\n| ------------------------------- | ---------------------------------------------------- |\r\n| 1-ReactDOM.render流程           | [链接](./visio/1-ReactDOM.render流程.vsdx)           |\r\n| 2-scheduleCallback回调队列      | [链接](./visio/2-scheduleCallback回调队列.vsdx)      |\r\n| 3-react_scheduler调度的主要流程 | [链接](./visio/3-react_scheduler调度的主要流程.vsdx) |\r\n| 4-schedule三大步骤              | [链接](./visio/4-schedule三大步骤.vsdx)              |\r\n| 5-react的三大工作状态           | [链接](./visio/5-react的三大工作状态.vsdx)           |\r\n| 6-expirationTime的五种类型      | [链接](./visio/6-expirationTime的五种类型.vsdx)      |\r\n| 7-react的几大更新阶段           | [链接](./visio/7-react的几大更新阶段.vsdx)           |\r\n| 8-hooks时如何存储的             | [链接](./visio/8-hooks是如何存储的.vsdx)             |\r\n| 9-一句话总结更新流程            | [链接](./visio/9-一句话总结更新流程.vsdx)            |\r\n| 10-单链表树状结构               | [链接](./visio/10-单链表树状结构.vsdx)               |\r\n| 11-react16生命周期              | [链接](./visio/11-react16生命周期.vsdx)              |\r\n| 12-react组件通信方式            | [链接](./visio/12-react组件通信方式.vsdx)            |\r\n| 13-setState是同步还是异步       | [链接](./visio/13-setState是同步还是异步.vsdx)       |\r\n\r\n\u003e **xmind**\r\n\r\n| Name                       | Link                                             |\r\n| -------------------------- | ------------------------------------------------ |\r\n| 1-react各大节点之间的关系  | [链接](./xmind/1-react各大节点之间的关系.xmind)  |\r\n| 2-react_render的update过程 | [链接](./xmind/2-react_render的update过程.xmind) |\r\n| 3-expirationTime计算流程   | [链接](./xmind/3-expirationTime计算流程.xmind)   |\r\n| 4-setState流程             | [链接](./xmind/4-setState流程.xmind)             |\r\n| 5-react任务优先级\u0026任务分片 | [链接](./xmind/5-react任务优先级\u0026任务分片.xmind) |\r\n| 6-expirationTime三种模式   | [链接](./xmind/6-expirationTime三种模式.xmind)   |\r\n\r\n\u003e **issue**\r\n\r\n| Name                                        | Link                                                                |\r\n| ------------------------------------------- | ------------------------------------------------------------------- |\r\n| `ReactDOM.render`简略过程                   | [issue#1](https://github.com/ddzy/react-reading-sources/issues/1)   |\r\n| `react`从调度到更新的简单流程               | [issue#2](https://github.com/ddzy/react-reading-sources/issues/2)   |\r\n| `react`的几大更新阶段                       | [issue#3](https://github.com/ddzy/react-reading-sources/issues/3)   |\r\n| `Fiber`对象的几个重要属性                   | [issue#4](https://github.com/ddzy/react-reading-sources/issues/4)   |\r\n| `ReactDOM.render`流程再梳理                 | [issue#5](https://github.com/ddzy/react-reading-sources/issues/5)   |\r\n| fiber的`updateQueue`的基本结构              | [issue#6](https://github.com/ddzy/react-reading-sources/issues/6)   |\r\n| `fiber.tag`重要类型汇总                     | [issue#7](https://github.com/ddzy/react-reading-sources/issues/7)   |\r\n| 函数组件(`FunctionComponent`)的更新         | [issue#8](https://github.com/ddzy/react-reading-sources/issues/8)   |\r\n| `hooks`存储结构                             | [issue#10](https://github.com/ddzy/react-reading-sources/issues/10) |\r\n| `hooks`运行机制                             | [issue#11](https://github.com/ddzy/react-reading-sources/issues/10) |\r\n| 渲染时的优化策略                            | [issue#12](https://github.com/ddzy/react-reading-sources/issues/12) |\r\n| 关于 `React` 的一些疑点思考                 | [issue#15](https://github.com/ddzy/react-reading-sources/issues/15) |\r\n| \\[译] `React` 为何要使用链表遍历 `Fiber` 树 | [issue#18](https://github.com/ddzy/react-reading-sources/issues/18) |\r\n| \\[译] 使用 requestIdleCallback              | [issue#20](https://github.com/ddzy/react-reading-sources/issues/20) |\r\n| \\[译] 深度探索 styled-components 工作原理   | [issue#22](https://github.com/ddzy/react-reading-sources/issues/22) |\r\n\r\n## History\r\n\r\n@see: [CHANGELOG.md](./CHANGELOG.md)\r\n\r\n## LICENSE\r\n\r\n@see: [MIT](./LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddzy%2Freact-reading-sources","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fddzy%2Freact-reading-sources","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fddzy%2Freact-reading-sources/lists"}