Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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原理表述清楚.

Awesome Lists containing this project

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)