react-reading-sources
react-reading-sources copied to clipboard
Published
20 hours ago •
ddzy
ddzy
The notes about reading source code of react
react-reading-sources
Desc
闲暇之时, 精心沉淀, 品一口82年拉菲, 啵一口陈年老酿, 读一首react源码, 不失为一大乐事~
这是闲时阅读react源码过程中的心得、笔记, 只是单纯的个人理解~
直到读源码之前, 我一直对react保持好奇、憧憬的态度.
何为好奇? 仅仅一个setState, 就能引发整个react应用的更新, 仅仅一个state, 就能随心所欲的切换状态.
何为憧憬? [email protected]的hooks着实很舒服, 我的毕设当中也大量使用, 那么诸如useState、useEffect是如何实现的? 又让我对react内部机理产生强烈憧憬.
所以, 在期末考之余创建了本仓库, 旨在将自己阅读源码过程中的心得、体会记录下来. 由于react源码着实太过庞大和难以理解, 所以仓库笔记可能跳跃度很高, 要完成可能还要很长很长时间吧.
Toc
images
| Name | Link |
|---|---|
| 1-FiberRoot&RootFiber&FiberTree | 链接 |
| 2-渲染帧 | 链接 |
| 3-concurrent | 链接 |
| 4-ReactDOM.render流程 | 链接 |
| 5-react的几大更新阶段 | 链接 |
| 6-hooks是如何存储的 | 链接 |
| 7-react16生命周期 | 链接 |
| 8-react组件通信方式 | 链接 |
| 9-setState是同步还是异步 | 链接 |
visio
| Name | Link |
|---|---|
| 1-ReactDOM.render流程 | 链接 |
| 2-scheduleCallback回调队列 | 链接 |
| 3-react_scheduler调度的主要流程 | 链接 |
| 4-schedule三大步骤 | 链接 |
| 5-react的三大工作状态 | 链接 |
| 6-expirationTime的五种类型 | 链接 |
| 7-react的几大更新阶段 | 链接 |
| 8-hooks时如何存储的 | 链接 |
| 9-一句话总结更新流程 | 链接 |
| 10-单链表树状结构 | 链接 |
| 11-react16生命周期 | 链接 |
| 12-react组件通信方式 | 链接 |
| 13-setState是同步还是异步 | 链接 |
xmind
| Name | Link |
|---|---|
| 1-react各大节点之间的关系 | 链接 |
| 2-react_render的update过程 | 链接 |
| 3-expirationTime计算流程 | 链接 |
| 4-setState流程 | 链接 |
| 5-react任务优先级&任务分片 | 链接 |
| 6-expirationTime三种模式 | 链接 |
issue
| Name | Link |
|---|---|
ReactDOM.render简略过程 |
issue#1 |
react从调度到更新的简单流程 |
issue#2 |
react的几大更新阶段 |
issue#3 |
Fiber对象的几个重要属性 |
issue#4 |
ReactDOM.render流程再梳理 |
issue#5 |
fiber的updateQueue的基本结构 |
issue#6 |
fiber.tag重要类型汇总 |
issue#7 |
函数组件(FunctionComponent)的更新 |
issue#8 |
hooks存储结构 |
issue#10 |
hooks运行机制 |
issue#11 |
| 渲染时的优化策略 | issue#12 |
关于 React 的一些疑点思考 |
issue#15 |
[译] React 为何要使用链表遍历 Fiber 树 |
issue#18 |
| [译] 使用 requestIdleCallback | issue#20 |
| [译] 深度探索 styled-components 工作原理 | issue#22 |
History
@see: CHANGELOG.md
LICENSE
@see: MIT
ddzy