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