react核心流程图 高清大图：

• 永久地址： 链接:https://pan.baidu.com/s/1EfTWzqC4psW8kq5kYP-v9A 密码:8nqr

读源码大致总结了一下几个阶段，也是为什么我需要总结这样的一个流程图，流程图把握整体，文章深入细节：

1. 通过文字的形式记录，逻辑理清楚了，能说明白就很不容易了；但是从文字上很难把握全局，后期回顾的时候比较慢，查 bug 原因会有不少阻力。
2. 通过流程图的形式记录，鸟瞰整体，能清楚各个模块功能，后期回顾的时候比较快，查 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副作用，尽可能使组件为纯函数