{"id":19657786,"url":"https://github.com/wbccb/mini-react","last_synced_at":"2025-06-20T21:35:27.163Z","repository":{"id":180397830,"uuid":"637311413","full_name":"wbccb/mini-react","owner":"wbccb","description":"React 18.3.1的常见基础知识 + 源码分析 + 手写核心代码，在线文档地址：https://wbccb.github.io/mini-react/","archived":false,"fork":false,"pushed_at":"2025-02-22T17:16:25.000Z","size":3911,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-28T19:41:17.035Z","etag":null,"topics":["markdown","react18","typescript"],"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/wbccb.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":"2023-05-07T06:46:37.000Z","updated_at":"2025-02-22T17:16:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"8a5712f9-4bb7-4e22-8885-a7ff9078fbc0","html_url":"https://github.com/wbccb/mini-react","commit_stats":null,"previous_names":["wbccb/mini-react"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wbccb/mini-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbccb%2Fmini-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbccb%2Fmini-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbccb%2Fmini-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbccb%2Fmini-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wbccb","download_url":"https://codeload.github.com/wbccb/mini-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wbccb%2Fmini-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261020731,"owners_count":23098210,"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":["markdown","react18","typescript"],"created_at":"2024-11-11T15:33:40.334Z","updated_at":"2025-06-20T21:35:22.144Z","avatar_url":"https://github.com/wbccb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React18\n基于`18.3.1`源码进行分析和手写\n\n1. 源码解析文章中的`流程图`：核心代码展示\n2. 源码解析`文章`：基于流程图进行核心代码分析\n3. 手写`代码`：基于文章分析的核心代码进行最小化工程的实现\n\n\n## 项目目录\n\n- `debug-demo`是源码文章调试的相关代码\n- `docs`是源码文章的目录\n- `packages`是手写代码存放的目录\n- `examples`是手写代码使用的示例\n\n## docs内容概述\n\n### React基础\n\n- [React18使用详解](https://github.com/wbccb/mini-react/blob/main/docs/0-基础知识/React18使用详解.md)\n- [React如何使用css](https://github.com/wbccb/mini-react/blob/main/docs/0-基础知识/React如何使用css.md)\n- [React路由](https://github.com/wbccb/mini-react/blob/main/docs/0-基础知识/React路由.md)\n- [Redux状态管理多种模式](https://github.com/wbccb/mini-react/blob/main/docs/0-基础知识/Redux状态管理多种模式.md)\n- [SSR\u0026CSR](https://github.com/wbccb/mini-react/blob/main/docs/0-基础知识/SSR\u0026CSR.md)\n\n### 前置知识 \u0026 原理初探\n\n- [(WIP)build-your-own-react总结](https://github.com/wbccb/mini-react/blob/main/docs/1-%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86%26%E5%8E%9F%E7%90%86%E5%88%9D%E6%8E%A2/0-(WIP)React%E5%88%9D%E6%8E%A2-%E6%9E%84%E5%BB%BA%E6%9C%80%E5%B0%8F%E5%8C%96%E7%9A%84React.md)\n- [React项目结构](https://github.com/wbccb/mini-react/blob/main/docs/1-%E5%89%8D%E7%BD%AE%E7%9F%A5%E8%AF%86%26%E5%8E%9F%E7%90%86%E5%88%9D%E6%8E%A2/1-React%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.md)\n\n## React手写\n\n源码解析中整理的流程图以及根据流程图进行具体的代码分析本质就是`mini-react`的雏形\n- 根据博客中的源码解析 =\u003e 构建更加完善的`mini-react`代码\n- 根据更加完善的`mini-react`代码 =\u003e 完善博客中的源码解析的流程图和源码分析流程\n\n### 难点分析\n\n- [Scheduler实现思路.md](https://github.com/wbccb/mini-react/blob/main/docs/2-手写代码/Scheduler实现思路.md)\n- [render\u0026commit阶段.md](https://github.com/wbccb/mini-react/blob/main/docs/2-手写代码/render\u0026commit阶段.md)\n\n### 手写代码\n\n- `react`\n- `react-dom`\n- `react-reconciler`\n- `shared`\n\n### 运行调试\n\n```shell\npnpm install \n\ncd examples\n\npnpm run dev\n```\n\n\n## 源码解析\n\n### 核心流程\n\n- [(WIP)首次渲染流程分析(一)](https://github.com/wbccb/mini-react/blob/main/docs/3-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/1.(WIP)%E9%A6%96%E6%AC%A1%E6%B8%B2%E6%9F%93%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90(%E4%B8%80).md)\n- [(WIP)首次渲染流程分析(二)](https://github.com/wbccb/mini-react/blob/main/docs/3-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/2.(WIP)%E9%A6%96%E6%AC%A1%E6%B8%B2%E6%9F%93%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90(%E4%BA%8C).md)\n- [(WIP)非并发更新渲染流程分析(一)](https://github.com/wbccb/mini-react/blob/main/docs/3-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/3.(WIP)%E9%9D%9E%E5%B9%B6%E5%8F%91%E6%9B%B4%E6%96%B0%E6%B8%B2%E6%9F%93%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90(%E4%B8%80).md)\n- [(WIP)非并发更新渲染流程分析(二)](https://github.com/wbccb/mini-react/blob/main/docs/3-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/4.(WIP)%E9%9D%9E%E5%B9%B6%E5%8F%91%E6%9B%B4%E6%96%B0%E6%B8%B2%E6%9F%93%E6%B5%81%E7%A8%8B%E5%88%86%E6%9E%90(%E4%BA%8C).md)\n- [(WIP)常见hook源码分析](https://github.com/wbccb/mini-react/blob/main/docs/3-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/5.(WIP)%E5%B8%B8%E8%A7%81hook%E6%BA%90%E7%A0%81%E5%88%86%E6%9E%90.md)\n- [(WIP)合成事件](https://github.com/wbccb/mini-react/blob/main/docs/3-%E6%BA%90%E7%A0%81%E8%A7%A3%E6%9E%90/6.(WIP)%E5%90%88%E6%88%90%E4%BA%8B%E4%BB%B6.md)\n- (TODO)并发模式下的渲染更新流程分析\n\n### 第三方库源码\n- (TODO)mobx源码解析\n- (TODO)redux源码解析\n- (TODO)zustand源码解析\n- (TODO)react-router源码解析\n\n\n# 参考\n1. https://dev.to/vinomanick/create-a-monorepo-using-pnpm-workspace-1ebn\n2. https://github.com/vinomanick/pnpm-monorepo","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwbccb%2Fmini-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwbccb%2Fmini-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwbccb%2Fmini-react/lists"}