Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/7kms/react-illustration-series
图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.
https://github.com/7kms/react-illustration-series
fiber hook react synthetic-events
Last synced: 3 days ago
JSON representation
图解react源码, 用大量配图的方式, 致力于将react原理表述清楚.
- Host: GitHub
- URL: https://github.com/7kms/react-illustration-series
- Owner: 7kms
- License: agpl-3.0
- Created: 2020-05-06T17:07:35.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-02T06:55:06.000Z (11 months ago)
- Last Synced: 2024-10-29T15:10:31.507Z (3 months ago)
- Topics: fiber, hook, react, synthetic-events
- Language: TypeScript
- Homepage: http://7km.top/
- Size: 31.2 MB
- Stars: 7,508
- Watchers: 82
- Forks: 806
- Open Issues: 39
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
- stars - 7kms/react-illustration-series
- awesome - 7kms/react-illustration-series - 图解react源码, 用大量配图的方式, 致力于将react原理表述清楚. (TypeScript)
- awesomes - react with graph (chinese)
- awesome-github-star - react-illustration-series
- awesome-list - 图解react
- awesome-react-cn - 图解React原理系列
README
# 图解 React 源码系列
> `react`源码, 基于[`[email protected]`](https://github.com/facebook/react/tree/v17.0.2)(尽可能跟随 react 版本的升级, 持续更新). 用大量配图的方式, 致力于将`react`原理表述清楚.
## 使用指南
1. 本系列以 react 核心包结构和运行机制为主线索进行展开. 包括`react 宏观结构`, `react 工作循环`, `react 启动模式`, `react fiber原理`, `react hook原理`, `react 合成事件`等核心内容.
2. 开源作品需要社区的净化和参与, 如有表述不清晰或表述错误, 欢迎[issue 勘误](https://github.com/7kms/react-illustration-series/issues). 如果对你有帮助, 请不吝 star.
3. 本系列最初写作于 2020 年 6 月(当时稳定版本是 v16.13.1), 随着 react 官方的升级, 本 repo 会将主要版本的文章保存在以版本号命名的分支中.
4. 当下前端技术圈总体比较浮躁, 各技术平台充斥着不少"标题党". 真正对于技术本身, 不能急于求成, 需要静下心来修炼.
5. 本系列不是面经, 但会列举一些面试题来加深对 react 理解.
6. 本系列所有内容皆为原创, 如需转载, 请注明出处.## 适用读者
1. 对`react`,`react-dom`开发 web 应用有实践经验.
2. 期望深入理解`react`内在作用原理.---
## 版本跟踪
> 本系列暂时只跟踪稳定版本的变动. `react`仓库代码改动比较频繁, 在写作过程中, 如果伴随小版本的发布, 文章中的源码链接会以写作当天的`最新小版本`为基准.
- [`[email protected]`](https://github.com/facebook/react/releases/tag/v17.0.0)作为主版本升级, 相较于 16.x 版本, 在使用层面基本维持不变, 在源码层面需要关注的重大的变动如下
| 重大变动 | 所属板块 | 官方解释 |
| ------------------------------------------------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| 重构`Fiber.expirationTime`并引入`Fiber.lanes` | `react-reconciler` | [Initial Lanes implementation #18796](https://github.com/facebook/react/pull/18796) |
| 事件代理节点从 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) |- [`[email protected]`](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 内部的执行性能.
* [`[email protected]`](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).
## 主要内容
### 基本概念
- [宏观包结构](./docs/main/macro-structure.md)
- [两大工作循环](./docs/main/workloop.md)
- [高频对象](./docs/main/object-structure.md)### 运行核心
- [reconciler 运作流程](./docs/main/reconciler-workflow.md)
- [启动过程](./docs/main/bootstrap.md)
- [优先级管理](./docs/main/priority.md)
- [scheduler 调度原理](./docs/main/scheduler.md)
- [fiber 树构造(基础准备)](./docs/main/fibertree-prepare.md)
- [fiber 树构造(初次创建)](./docs/main/fibertree-create.md)
- [fiber 树构造(对比更新)](./docs/main/fibertree-update.md)
- [fiber 树渲染](./docs/main/fibertree-commit.md)
- 异常处理### 数据管理
- [状态与副作用](./docs/main/state-effects.md)
- [hook 原理(概览)](./docs/main/hook-summary.md)
- [hook 原理(状态 Hook)](./docs/main/hook-state.md)
- [hook 原理(副作用 Hook)](./docs/main/hook-effect.md)
- [context 原理](./docs/main/context.md)### 交互
- [合成事件原理](./docs/main/synthetic-event.md)
### 高频算法
- [位运算](./docs/algorithm/bitfield.md)
- [堆排序](./docs/algorithm/heapsort.md)
- [深度优先遍历](./docs/algorithm/dfs.md)
- [链表操作](./docs/algorithm/linkedlist.md)
- [栈操作](./docs/algorithm/stack.md)
- [diff 算法](./docs/algorithm/diff.md)## 历史版本
- [基于 v16.13.1 版本的分析](https://github.com/7kms/react-illustration-series/tree/v16.13.1)
- [基于 v17.0.1 版本的分析](https://github.com/7kms/react-illustration-series/tree/v17.0.1)