react核心流程图 高清大图: 链接: http://note.youdao.com/noteshare?id=f72ce7b6939a7ba24ff42fe9a507dbb4&sub=C646D7219FCF4441995E8A36CD7EE883
这个源码阅读计划是从毕业的前几个月开始的,花了将近一个月的时间逐行阅读到react调度更新部分之后,虽然有所收获, 但是还有很多地方有点不理解与模糊,并没有带着问题阅读源码,因此就停下来了。
最近把官网的hook文章都仔细过了一遍,也仔细研究了前端精读
公众号上所有关于hook的文章,并且用hook写了一个表单组件库,感受到了react的牛逼之处,最近这几天通过react status
这个订阅号,发现目前一个新的表单库,用hook写的,叫做react-hook-form,只能说文档是非常完善的,等我把源码研究透彻之后,可能会放到这个仓库,稍微提一下,这个库的特点是:自动或者手动收集表单组件的字段并整合到一个对象里,非常不可思议的是不用useState来保存字段状态以及更新状态渲染组件,所有的字段都被存放在useRef中,然后利用一个useState返回的set进行手动强制渲染,因此减少了很多的重新渲染的操作。
另一个有意思的事情是,之前看react源码,中间多次出现concurrent这个模式,一直没明白同步到底是干啥,现在react16.11.1版本的已经给出了文档,不过这个模式还是一个试验性的功能,该功能能够打断渲染,这个渲染不是说浏览器的渲染,而是react的调度阶段的一些操作。
总之,是时候把之前的源码捡起来,好好梳理总结一下。在这个过程中,我也会结合当前慕课网上的react源码解析教程来对原来写下来的文章进行总结与梳理,希望能够有更深的理解。
PS: 真心给react粉丝们一个非常好的订阅号,react status,这个周刊会一直推送给你最新的react进展与相关的代码库。 非常希望大家能和我一起讨论,不管是react源码还是react status中有趣的文章,欢迎在issue中留言。等react源码总结完了,我也会陆陆续续在issue中发一些关于react的文章的读书笔记与实践的思考。如果感兴趣,可以点个star关注一下这个仓库的更新。
- react
- shared 整个项目通用代码
- react 核心代码,react定义、reactElement类型对象的构建过程、ReactChildren对react树的操作原理等等
- react-is 梳理react框架中两大类型:ReactElement以及Portal类型。梳理React.memo,Ref等类型的构建成ReactElementd的过程
- scheduler 规划 React 初始化,更新等等
- react-reconciler React调度器
- 到期时间是如何确定的
- context的实现机制
- ...
- events 合成事件系统
- react的错误处理机制
- 从invokeGuardedCallbackAndCatchFirstError,invokeGuardedCallback,invokeGuardedCallbackImpl看是如何对错误进行处理的
- ...
- react-dom DOM渲染
- 各类型组件的运行机制
- 总结
- react-router4各个API的使用与源码分析
- react-transition-group
- 基本组件:Transition组件分析,结合生命周期详细分析该组件实现动画的原理
- TransitionGroup组件:对children中Transition或者CSSTransition组件的动画的管理
- redux-saga:管理react副作用,尽可能使组件为纯函数
源码实例分析:可见runlogic文件夹下的代码,断点分析(console.log不是一快照的方式打印结果,对引用对象的调试会不和预期)react对不同组件的处理逻辑等等运行机制
🍺D1 项目目录
🍺D3 react
🍺D5 scheduler
🍺D6 react-reconciler
- 1、react源码浅析(六):react的fiber树与页面节点树的关系
- 2-0、react源码浅析(六):ReactDOM.render流程概览
- 2-1、react源码浅析(六):创建container对应的root
- 2-2、react源码浅析(六):创建root下的fiber树并开始初始调度
- 3-1、react源码浅析(六):调度入口函数scheduleWork
- 3-2、react源码浅析(六):performAsyncWork与performSyncWork
- 3-3、react源码浅析(六):performWork调度root双向循环链表
- 3-4、react源码浅析(六):performWorkOnRoot调度某个root的fiber树
- 3-6-0、react源码浅析(六):root渲染阶段renderRoot
- 3-6-1、react源码浅析(六):对root执行updateHostRoot
- 3-6-2、react源码浅析(六):对类组件执行updateClassComponent
- 3-6-last、react源码浅析(六):completeUnitOfWork完成当前节点的调度
- 3-7-0、react源码浅析(六):root提交阶段completeRoot
- 3-7-1、react源码浅析(六):提交阶段执行getSnapshotBeforeUpdate生命周期函数
- 3-7-2、react源码浅析(六):提交HostComponent原生HTML标签上的effect
- 3-7-3、react源码浅析(六):最后提交阶段,执行剩余生命周期钩子
- 3-8-1、react源码浅析(六):多次执行setState的更新机制
- 3-8-2、react源码浅析(六):到期时间的计算规则