react核心流程图 高清大图:
- 永久地址: 链接:https://pan.baidu.com/s/1EfTWzqC4psW8kq5kYP-v9A 密码:8nqr
读源码大致总结了一下几个阶段,也是为什么我需要总结这样的一个流程图,流程图把握整体,文章深入细节
:
- 通过文字的形式记录,逻辑理清楚了,能说明白就很不容易了;但是从文字上很难把握全局,后期回顾的时候比较慢,查 bug 原因会有不少阻力。
- 通过流程图的形式记录,鸟瞰整体,能清楚各个模块功能,后期回顾的时候比较快,查 bug 原因相对轻松。
流程图中也总结了一些 react 中比较常用的概念以及一些很容易误解的地方,比如
- setState 何时何地是同步或者异步,原因是什么(是否空闲,是否是concurrent模式,处于react什么阶段决定了其到期时间,也就决定了是异步还是同步)?
- 常说绑定事件函数在构造函数里 bind,props的属性不要传字面量对象,这些措施一定就有效?什么场景有效(结合 shouldComponentDidUpdate,pureComponent,还有一些入参是 nextProps的手动比较的地方,这些都应该考虑在内)?
PS: 推荐一下 react status,这个周刊会一直推送给你最新的react进展与相关的代码库。
非常希望大家能和我一起讨论,不管是react源码还是react status中有趣的文章,欢迎在issue中留言。如果感兴趣,可以点个star关注一下这个仓库的更新。
更多文章敬请关注公众号:
- react
- shared 整个项目通用代码
- react 核心代码,react定义、reactElement类型对象的构建过程、ReactChildren对react树的操作原理等等
- react-is 梳理react框架中两大类型:ReactElement以及Portal类型。梳理React.memo,Ref等类型的构建成ReactElementd的过程
- scheduler 规划 React 初始化,更新等等
- react-reconciler React调度器
- 到期时间是如何确定的
- context的实现机制
- ...
- events 合成事件系统
- 事件注册与触发
- 为什么需要合成事件,为什么需要有自己单独的事件机制:事件委托,事件兼容处理,可控的调度更新任务。
- 如何封装可扩展的 SyntheticEvent 对象
- event.persist() 的原理:由于事件触发比较频繁导致生成的合成事件对象的数量也非常大,react 为了节约内存,构建了一个容量为 10 的事件池,在每次事件处理函数同步代码执行完毕之后,会重置这个合成事件,然后将这个空的合成事件对象存到事件池中,下次生成合成事件的时候再取出来设置一些属性。因此当你的事件处理函数涉及到异步的时候,事件处理函数返回,此时合成事件对象被重置,你异步代码中就无法访问到的正确的值,因此event.persistent()就是为了解决这样的问题,这个函数调用之后会给合成事件对象标记为isPersist,后续也就不会 release 这个合成事件,release 会重置合成事件的属性值(包括target指向的原生事件对象),然后将空的合成事件对象添加到池中的空余位置。
- react的错误处理机制
- 从invokeGuardedCallbackAndCatchFirstError,invokeGuardedCallback,invokeGuardedCallbackImpl看是如何对错误进行处理的
- ...
- react-dom DOM渲染
- 各类型组件的运行机制
- 专题
- 结合 react 源码图解实例分析 react diff 以及存在的坑
- react 内部是如何在挂在以及卸载的时候处理 ref 的: 相见图解中的 “非常重要” 部分的文字描述,以及图中其他相关文字的提示。
- concurrent
- ...
- react-router4各个API的使用与源码分析
- react-transition-group
- 基本组件:Transition组件分析,结合生命周期详细分析该组件实现动画的原理
-
TransitionGroup组件:对children中Transition或者CSSTransition组件的动画的管理
-
redux-saga:管理react副作用,尽可能使组件为纯函数
源码实例分析:可见runlogic文件夹下的代码,断点分析(console.log不是一快照的方式打印结果,对引用对象的调试会不和预期)react对不同组件的处理逻辑等等运行机制
🍺D1 项目目录
🍺D2 shared
🍺D3 react
- 1、React源码随笔3.1-组件与ReactElement的关系%ef%bc%9areact%e6%96%87%e4%bb%b6%e5%a4%b9-%e6%ba%90%e7%a0%81%e5%85%a5%e5%8f%a3.md)
- 2、React源码随笔3.2-ReactElement以及Children
🍺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源码浅析(六):到期时间的计算规则
🍺D8 错误处理机制
🍺D1
- react-router4源码浅析总结
- react-router4源码浅析(一) :matchPath
- react-router4源码浅析(二) :Route
- react-router4源码浅析(三) :BrowserRouter&&HashRouter
- react-router4源码浅析(四) :Router
- react-router4源码浅析(五) :generatePath
- react-router4源码浅析(六) :Redirect
- react-router4源码浅析(七) :Switch
- react-router4源码浅析(八) :withRouter
- react-router4源码浅析(九) :Link